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