vscode使用eslint及prettier配合解决代码格式问题

一、esLint

esLint是提供一个插件化的javascript代码检测工具。

esLint 配置文件遵循 commonJS 的导出规则，所导出的对象是 eslint 的配置对象。

module.exports = {
  // 表示当前目录即为根目录， eslint 规则将被限制到该目录下
  root: true,
  // env 表示启用 eslint 检测的环境
  env: {
    // 在 node 环境下启动 eslint 检测
    node: true
  },
    // eslint 中基础配置需要继承的配置
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
 // 解析器
  parserOptions: {
    parser: 'babel-eslint'
  },
// 需要修改的启用规则及其各自的错误级别
/**
 *  错误级别分为三种：
 *  "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'
  }
}

二、eslint和prettier配合解决代码格式问题

1、打开vscode 在插件选项中找到对应插件进行安装即可。

2、新建一个.prettierrc文件

在该文件下，写入一下代码

{
    // 不尾随分号 即 写完一句js代码，后面不加分号
    "semi": false,
    // 使用单引号
    "singleQuote": true,
    // 多行逗号分割的语法中，最后一行不加逗号
    "trailingComma": "none"
}

3、设置vscode保存代码时，让代码符合eslint标准

4、修改vscode中tab对应的空格数

对于vscode而言，默认一个tab等于4个空格，而eslint希望一个tab为两个空格。

5、如果vscode使用了多个代码格式化工具，需要将prettier设置为默认

在任意一个文件中，右键

6、eslint和prettier代码冲突问题解决

eslint要求方法名和后面的小括号之间有个空格，但是保存时，prettier会自动将这个空格删除，因此造成冲突。

只需在.eslintrc.js文件中添加一条规则即可