在 React 项目中整合 Eslint 和 Prettier vscode

settings.json

{

  "files.associations": {

    "*.js": "javascriptreact"

  },

  // 全局formater

  "editor.tabSize": 2,

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // eslint

  "eslint.autoFixOnSave": true,

  "eslint.codeAction.showDocumentation": {

    "enable": true

  },

  // prettier

  "prettier.vueIndentScriptAndStyle": true,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  },

  "editor.formatOnSave": true,

  "editor.formatOnType": true,

  "editor.formatOnPaste": true,

  //"vetur.validation.template": false,

  "diffEditor.ignoreTrimWhitespace": false,

  "diffEditor.renderSideBySide": true,

  "prettier.trailingComma": "none", // 去掉结尾的逗号

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

}

2. .editorconfig

# top-most EditorConfig file

root = true

[*]

Unix-style newlines with a newline ending every file

end_of_line = lf

[*.{js,py}]

# 字符编码集

charset = utf-8

# 缩进使用 tab 或者 space

indent_style = space

# 缩进为space时缩进字符数

indent_size = 2

# 是否将尾行空格自动删除

trim_trailing_whitespace = true

# 是否使文件以一个空白行结尾

insert_final_newline = true

# 编码区字符数(宽度)限定 结合eslint max-len WebStorm支持 VSCode不支持

max_line_length = 100

# 引号样式 single double auto

quote_type = single

# 花括号是否另起一行

#curly_bracket_next_line = true

# 操作符两边是否有空格 true false hybrid

spaces_around_operators = true

# 括号两边是否有空格 none inside outside both

#spaces_around_brackets = both

3. .eslintrc.js

module.exports = {

  // 指定脚本的运行环境，一个环境定义了一组预定义的全局变量

  env: {

    browser: true, //浏览器环境中的全局变量

    es6: true, //启用除了modules以外的所有ES6特性（该选项会自动设置 ecmaVersion 解析器选项为 6）

    node: true //Node.js 全局变量和 Node.js 作用域

  },

  extends: [

    'eslint:recommended', //所有在规则页面被标记为“✔️”的规则将会默认开启

    'plugin:react/recommended'

  ],

  // "extends": "airbnb",

  // 设置全局变量

  globals: {

    Atomics: 'readonly',

    SharedArrayBuffer: 'readonly'

  },

  // 指定解析器

  parser: 'babel-eslint', //兼容ES处于实验性阶段的语法，如类属性用”=“赋值

  // 指定解析器选项

  parserOptions: {

    ecmaFeatures: {

      jsx: true,

      generators: true,

      experimentalObjectRestSpread: true

    },

    ecmaVersion: 2018,

    sourceType: 'module'

  },

  // 第三方插件

  plugins: ['react'],

  settings: {

    'import/resolver': {

      // 识别 webpack 配置的路径别名

      webpack: {

        config: 'webpack.config.js'

      }

    },

    react: {

      version: '999.999.999'

    }

  },

  rules: {

    'comma-dangle': 1,

    quotes: [0, 'single'],

    'global-strict': 0,

    'no-extra-semi': 1,

    'no-underscore-dangle': 0,

    'no-console': 0,

    'no-undef': 'warn',

    'no-unused-vars': [

      'warn',

      {

        vars: 'all',

        args: 'after-used',

        ignoreRestSiblings: false,

        varsIgnorePattern: 'createElement'

      }

    ],

    'no-trailing-spaces': [1, { skipBlankLines: true }],

    'no-unreachable': 1,

    'no-alert': 0,

    'no-mixed-spaces-and-tabs': 1,

    'no-empty-pattern': 1,

    'no-empty': 1,

    'no-useless-escape': 1,

    'no-case-declarations': 1,

    'no-debugger': 1,

    'react/no-string-refs': 1,

    'react/react-in-jsx-scope': 2,

    'react/no-direct-mutation-state': 1,

    'react/prop-types': 0,

    'react/jsx-uses-react': 2,

    'react/jsx-uses-vars': 2,

    'react/jsx-no-undef': 2,

    'react/display-name': 0,

    'react/no-deprecated': 0,

    'react/no-unescaped-entities': 1,

    'react/jsx-key': 1,

    'react/jsx-no-target-blank': 1,

    'react/no-find-dom-node': 1,

    experimentalDecorators: 0

  }

};

4. .prettierrc.js

module.exports = {

  printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80

  tabWidth: 2, //一个tab代表几个空格数，默认为80

  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减

  singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号

  semi: true, //行位是否使用分号，默认为true

  trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"

  bracketSpacing: true //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }

};