VS Code插件，eslint，prettier那些事

本文主要来讲讲代码格式化涉及的一些注意点。如有错误，欢迎指正

首先要了解vscode插件与npm包的区别（这里主要指eslint，prettierr等）

VS Code插件

VS Code中安装的插件是在编辑器里面用的，主要提示给你看的，方便你直接在编辑器界面中看到红色波浪线提示的错误。还可以帮你修复简单的错误，简而言之就是给编辑器用于展示给开发人员

NPM包

跟lint相关的npm包，安装完是在命令行中去运行的。如果只安装npm包，vscode是不会有lint提示的，只能在运行命令行后在输出的终端窗口查看不符合lint规则的检测信息，简而言之，就是用于编译输出错误的

关联性

vscode中的eslint插件仅仅只是eslint插件，其本质还是会调用项目本地或全局安装的eslint（npm包），然后将eslint的报错反馈给vscode，因此我们可以直接在编辑器中看到错误。也就说eslint必须依赖本地安装/全局安装的eslint才可以正常工作

npm包安装的eslint包，可以在命令行执行eslint命令时，去触发检测代码，并把不符合lint规则输出到命令行终端。

以此类推Prettier插件是给VS Code编辑器本地提示用的以及格式化代码，prettier包是用于命令行方式进行风格检查。区别在于prettierr插件并不依赖npm包，可独立用于格式化代码。

需要注意，prettier的npm包并不能直接进行校验，而是需要整合到eslint的配置文件中。

eslint与prettier的区别

eslint用于质量检查
prettier用于风格检查

需要注意一点就是：由于会出现引入多个风格检查的插件和配置lint，这就导致存在部分会与prettier的lint出现冲突(主要是缩进、换行等)。因此需要lint预设包eslint-config-prettier，这个包的作用是先关闭这些与prettier冲突的lint规则，然后之后再启用prettier的规则，使得冲突的lint规则以prettier为准。也可以在eslint rules中关闭冲突规则

配置文件参考

vs code自身的配置文件settings.json用以控制全局设置，插件使用等实际开发中可以在项目根目录下创建.vscode目录，下面再创建settings.json指定项目中用到的插件规则

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

eslint的配置文件.eslintrc中重点是extends字段和rules字段，用于指定依赖插件和具体规则

  extends: ['airbnb', 'prettier', 'prettier/react'],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },
  rules: {
    'react/jsx-filename-extension': ['warn', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'no-unused-vars': 'warn',
    "no-console":'warn',
    "no-underscore-dangle":0,
    'react/prop-types': 0,
    "dot-notation":"warn",
    "no-nested-ternary":0,
    "no-undef":"warn",
    'react/destructuring-assignment': ['off'],
    'react/jsx-props-no-spreading': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'import/prefer-default-export': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },

prettier的配置文件.prettierrc用于指定编码符号，缩进、换行等规则

{
  "semi": false,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2
}