vue项目工程化

1、安装eslint

1
npm install eslint -D

2、初始化eslint

1
eslint --init

初始化时交互界面，一路回车选择默认即可，即可在工程根目录生成一个 .eslintrc.js 的配置文件,再新建一个 .eslintignore 文件用来忽略某些文件不检查

3、安装prettier

1
npm install prettier -D

然后在根目录中新建 .prettierrc.js 和 .prettierignore 文件

4、安装eslint-config-prettier 和 eslint-plugin-prettier

1
2
3
npm install eslint-config-prettier -D

npm install eslint-plugin-prettier -D

eslint-config-prettier ：关闭 Eslint 中与 Prettier 冲突的选项，只会关闭冲突的选项，不会启用Prettier的规则

eslint-plugin-prettier ：将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint –fix 来进行格式化；这样就相当于将 Prettier 整合进了 ESLint 中

5、配置 .eslintrc.js 和 .eslintignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
module.exports = {
  root: true, // 设置后会停止继续在父级目录寻找 .eslintrc 或 package.json文件
  env: {
    browser: true, // 浏览器环境中的全局变量
    node: true, // Node.js 全局变量和 Node.js 作用域
    es6: true, // 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）
  },
  extends: [
    'plugin:vue/essential', // essential代表配置类别，还有base, essential, strongly-recommended, recommended
    'eslint:recommended', // 启用一系列核心规则, eslint:all 启用当前安装的eslint版本中所有核心规则，不推荐使用
    'plugin:prettier/recommended',
  ],
  /**
   * extends 属性值可以由以下组成：
   * plugin:
   * 包名 (省略了前缀eslint-plugin-，比如，vue)
   * /
   * 配置名称 (比如 recommended)
   */
  // plugins: ["prettier"], // 插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置, plugins 属性值 可以省略包名的前缀 eslint-plugin-。
  parserOptions: {
    ecmaVersion: 12, // 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
    sourceType: 'module', // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    parser: 'babel-eslint', // 解析器，ESLint 默认使用Espree作为其解析器 Babel-ESLint： 一个对Babel解析器的包装，使其能够与 ESLint 兼容
  },
  /**
   * 当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了
   * 对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量
   */
  globals: {
    var1: 'writable',
    var2: 'readonly',
  },
  /**
   * ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    // 'prettier/prettier': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'linebreak-style': ['error', 'windows'],
  },
}
/**
 * ESLint 支持几种格式的配置文件：
 *
 * JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
 * YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
 * JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
 * (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
 * package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
 * 如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
 *
 * .eslintrc.js
 * .eslintrc.yaml
 * .eslintrc.yml
 * .eslintrc.json
 * .eslintrc
 * package.json
 */
1
2
3
/node_modules/
/public/
/dist/

6、配置 .prettierrc.js 和 .prettierignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
module.exports = {
  //每行最多多少个字符换行默认80
  printWidth: 100,
  //tab缩进大小,默认为2
  tabWidth: 2,
  // 使用制表符或是空格缩进行, 默认 false。
  useTabs: false,
  // 句尾是否使用分号, 默认true
  semi: false,
  //使用单引号, 默认false(在jsx中配置无效, jsx使用 jsxSingleQuote, 默认都是双引号)
  singleQuote: true,
  // 更改对象属性引号的的时机
  // "as-needed" -仅在需要时在对象属性周围添加引号， 默认值。
  // "consistent" -如果对象中至少有一个属性需要用引号引起来，请用所有属性引起来。
  // "preserve" -尊重对象属性中引号的输入使用。
  quoteProps: 'as-needed',
  // 在 JSX 中使用单引号而不是双引号
  jsxSingleQuote: true,
  // 行尾逗号,默认es5,可选 none|es5|all
  // "es5" -在ES5中有效的结尾逗号（对象，数组等）,默认值
  // "none" -没有尾随逗号。
  // "all"-尽可能在结尾加上逗号（包括函数参数）。这需要节点8或转换
  trailingComma: 'es5',
  // 对象中文字与大括号的空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // 箭头函数参数括号 默认always 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号 （x) => x
  arrowParens: 'always',
  // 仅格式化文件顶部包含特殊注释（称为杂注）的文件，默认 false
  requirePragma: false,
  // 是否在文件头部插入一个特殊的@format标记，默认 false
  insertPragma: false,
  // 行结尾的风格<auto | lf | crlf | cr>
  //"lf"- 仅换行（），在Linux和macOS以及git存储库中很常见\n
  //"crlf"- 回车符 + 换行符 （），在 Windows 上很常见\r\n
  //"cr"- 仅回车符（），很少使用\r
  //"auto"- 维护现有的行尾 （一个文件中的混合值通过查看第一行后使用的内容进行规范化）
  endOfLine: 'auto',
  // HTML空格敏感性
  // "css"-遵守CSS display属性的默认值。
  // "strict" -空白被认为是敏感的。
  // "ignore" -空白被认为是不敏感的。 此配置项可修复 .vue 文件模板中包裹文字时候结束标签的结尾尖括号掉到了下一行
  htmlWhitespaceSensitivity: 'ignore',
  // Vue文件脚本和样式标签缩进
  // "false" -不要缩进Vue文件中的脚本和样式标签。
  // "true" -在Vue文件中缩进脚本和样式标签。
  vueIndentScriptAndStyle: false,
}
1
2
3
/node_modules/
/public/
/dist/

6-1、安装webpack插件，能够在编译阶段自动检测和修复相关eslint错误

1
npm install eslint-webpack-plugin -D

在vue.config.js中

1
2
3
4
5
6
7
8
9
10
11
12
const EslintPlugin = require('eslint-webpack-plugin')
...
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new EslintPlugin({
        files: ['**/*.{html,vue,js}'], // 按需配置
        fix: true,
      }),
    ],
  },
})

7、安装stylelint

1
npm install stylelint stylelint-config-standard stylelint-prettier stylelint-config-prettier stylelint-scss postcss postcss-scss stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-order stylelint-config-recess-order -D

然后在根目录中新建 .stylelintrc.js 和 .stylelintignore 文件

  • Stylelint: 样式代码检查工具，帮助避免错误并在样式中强制执行约定

  • stylelint-config-standard: styelint的标准可共享配置

  • stylelint-prettier: 将 prettier 作为styleLint 的规则来使用

  • stylelint-config-prettier

  • stylelint-scss: 对scss支持

  • postcss —- 用于postcss-html和postcss-scss的支持

  • postcss-scss —- 解析<style lang=“scss”>下的scss样式

  • postcss-html —- 解析<style>类 vue、html 文件标签中的样式

  • stylelint-config-standard-scss —- 针对scss的标准可共享配置

  • stylelint-config-recommended-vue: Vue projects的规则集

  • stylelint-order 对css属性进行排序的插件工具

  • stylelint-config-recess-order: 社区提供的属性排序的规则集

8、配置 .stylelintrc.js 和 .stylelintignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
module.exports = {
  root: true,
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
    'stylelint-config-recommended-vue',
    'stylelint-prettier/recommended',
    'stylelint-config-prettier',
  ],
  plugins: ['stylelint-prettier', 'stylelint-order', 'stylelint-scss'],
  overrides: [
    {
      files: ['**/*.{html,vue}'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss',
    },
  ],
  rules: {
    'prettier/prettier': true,
    'selector-class-pattern': null, // 关于饿了么类似el-table--border 这样的类，会进行报错，可以添加下面这条自定义规则
    'no-invalid-double-slash-comments': null, // 关闭‘不允许双斜杠注释’
    'no-descending-specificity': null, // 关闭‘不允许选择器之后覆盖选择器的低特异性更高的特异性’
    'rule-empty-line-before': 'never', // 关闭‘每个样式规则前后都有空行’
    'comment-empty-line-before': [
      "never",
      { except: ["first-nested"] }
    ], // 关闭‘注释之前必须有空行’
  },
}

1
2
3
/node_modules/
/public/
/dist/

9、安装webpack插件，能够在编译阶段自动检测和修复相关stylelint错误

1
npm install stylelint-webpack-plugin -D

10、安装项目对类css语法的支持

1
npm install sass-loader node-sass -D

将该插件添加到webpack配置中

在vue.config.js中

1
2
3
4
5
6
7
8
9
10
11
12
const StylelintPlugin = require('stylelint-webpack-plugin')
...
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new StylelintPlugin({
        files: ['**/*.{html,vue,css,sass,scss}'], // 按需配置
        fix: true,
      }),
    ],
  },
})

11 、安装husky和lint-staged

1
npm install husky lint-staged -D