【Eslint Prettier Vscode】完整配置备忘

一   安装插件

安装eslint 以及各种插件，其中要注意的是 prettier-eslint 有了它才能 让 eslint 6.x 版本以上和 prettier 配合 。（注：ISSUE）

npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard eslint-plugin-jsx-a11y eslint-plugin-react prettier-eslint

二  配置文件

我们采用这一套配置文件，rule 可以随时修改

① .eslintrc.js

module.exports = {
  env: {
    es6: true,
    browser: true
  },
  // 指定eslint规范
  extends: ["airbnb", 'plugin:react/recommended', "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
  // 脚本在执行期间访问的额外的全局变量
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  // 解析器选项
  parserOptions: {
    // 启用 ES6 语法支持
    ecmaVersion: 2018,
    // "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    sourceType: "module",
    // 想使用的额外的语言特性
    ecmaFeatures: {
      // 启用 JSX
      jsx: true
    }
  },
  plugins: [
    'react',
    'import',
  ],
  settings: {
    'import/resolver': {
      webpack: {
        config: 'config/webpack.common.config.js'
      }
    }
  },
  // 额外的规则或覆盖默认的规则
  rules: {
    //允许windows开发环境
    "linebreak-style": [0, "error", "windows"],
    // 临时解除import置顶
    "import/first": 0,
    // 未使用警告
    "no-unused-vars": 1,
    // 缩进改为4空格，默认2空格
    indent: [0, 2],
    // JSX React
    "react/jsx-uses-react": 2,
    // 单引号
    "quotes": [1, "single"],
    // 允许 tsx
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".tsx"] }],
    // 允许导入
    "import/no-unresolved": [ 2,  { "caseSensitive": false } ],
    // require
    "@typescript-eslint/no-var-requires": 0
  }
};

plugin:prettier/recommended  这一个extends 详情见 官方文档 

② .prettierrc.js

同时新建 .prettierrc.js，来配置 prettier

module.exports = {
    trailingComma: "es5",
    tabWidth: 2,
    singleQuote: true
  };

逻辑和 Eslint 的保持一致即可

这里如果有 Eslint 和 Prettier 配合的 兼容性问题，就在这里修改配置，保持一致即可

③ setting.json

Vscode 的 setting.json 新增以下几项

// prettier 和 eslint 结合
"prettier-eslint.eslintIntegration": true,
// 保存规范格式
"eslint.autoFixOnSave": true,
// 默认的格式化选项 prettier
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 增加 ts 类型
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
         "language": "typescriptreact",
         "autoFix": true
    }
]

 

Prettier Github https://github.com/prettier/prettier-vscode

 

以上有 ts 相关的，如果不是ts都可以不加，一样使用