ESLint 配置（二）Standard 和 Prettier

使用 standard

使用 standard 定义的规则，并根据自己的需要进行修改

安装 standard：https://github.com/standard/eslint-config-standard

会安装以下插件：

"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",

在 .eslintrc.js 中配置：
"extends": ["eslint:recommended","standard"]

standard 要求不加分号，我也不想在代码中出现 alert，所以在 rules 中添加以下两条规则：

"rules": {
    "semi": ["error", "always"],
    "no-alert": "error"
}

将 prettier 和 ESLint 配合使用

需要安装的插件：

• prettier

• eslint-plugin-prettier：配置 eslint 使用 prettier 对代码进行格式化

• eslint-config-prettier：关闭一些不必要的或者是与 prettier 冲突的 lint 选项。

在项目根目录添加一个 .prettierrc.js，用来自定义格式化的风格，所有的属性在 这里 可以查到。

module.exports = {
    printWidth: 120, //一行的字符数换行
    tabWidth: 2, //一个tab代表几个空格数
    useTabs: false, //是否使用tab进行缩进
    singleQuote: true, //字符串是否使用单引号
    semi: true, //行尾是否使用分号，默认为true
    trailingComma: 'none', //是否使用尾逗号
    bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
  };

在这里面配置句尾强制添加分号（semi: true），可以去掉 eslint rule 里面的 "semi": ["error", "always"]

在 VSCode 中安装 ESLint、Prettier 插件

prettier 快捷键为 alt+shift+f。

如果 ESLint 检测到错误的话，会在 VSCode 的左下角进行提示：

参考

• https://segmentfault.com/a/1190000015315545
• https://zhuanlan.zhihu.com/p/81764012