ESLint+Prettier+VSCode编程规范

ESLint

一个插件化的JavaScript代码检测工具

在我们创建好的vue3项目中.eslintrc.js文件就是ESLint配置文件：

配置内容解析：

module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  // 解析器
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
    * 错误级别分为三种:
    * “off”或 0 - 关闭规则
    * “warn”或 1 - 开启规则，使用警告级别的错误: warn (不会导致程序退出)
    * “error”或 2  开启规则，使用错误级别的错误: error (当被触发的时候，程序会退出)
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

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

Prettier

代码格式化工具，可以配合VSCode和ESLint在保存时自动格式化代码

ESLint和Prettier配合解决代码格式化问题

1. 在VSCode搜索Prettier插件安装

2. 创建prettier配置文件

在代码根目录创建.pretterrc文件

输入内容：

{
  "semi": false,  // js后是否尾随分号
  "singleQuote": true,  // 是否使用单引号
  "trailingComma": "none"  // 多行js语法中在最后一行添加逗号
}
1
2
3
4
5

3. 在VSCode中设置

3.1 找到左下角设置图标，点击设置

搜索save，找到Format On Save,勾选

此时，在代码保存时会自动格式化代码。

3.2 但是对VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格，此时还需要修改设置中修改数字为 2 ：

3.3 当存在多个格式化工具时，例如存在prettier和volar时，在代码文件中右键 -> 使用…格式化 -> 选择prettier格式化

3.4. ESLint和Prettier之间的冲突问题

当出现冲突时可以在.eslintrc.js文件中修改文件中的规则