VSCode集成ESLint Prettier ，解决冲突

ESLint 在项目中的应用

在 vscode 中使用 ESLint 扩展，首选需要安装 ESLint 扩展

为让项目中代码风格统一，需要解决配置中的冲突。

• 多个插件同时格式化一个文件。
• 一段代码有 n 个 lint 规则冲突。

消除 vscode 集成插件冲突。

vscode 目前常用的格式化插件有 prettier,volar,eslint,vetur。

保存格式化与手动格式化配置需要一致，推荐 2 选一。

设置保存自动格式化文件，只使用 eslint
vscode settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

设置手动使用 eslint 格式化
手动格式化必须配置文件对应的格式化工具。如果没有配置，格式化时 vscode 会列出所有可格式化此文件的插件供选择。

手动格式化快捷键可以在代码文件右键查看。

vscode settings

{
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

消除各种 lint 规则的冲突

添加插件

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-vue eslint -D

在目录添加 .eslintrc.js

module.exports = {
  root: true,
  env: { node: true, 'vue/setup-compiler-macros': true },
  // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
  parser: 'vue-eslint-parser', // 所有文件的入口解析器
  parserOptions: {
    parser: '@typescript-eslint/parser', // ts解析器，vue解析器在遇到ts时使用ts解析器
    ecmaVersion: 'latest', // 最新的语法也不会报错
    sourceType: 'module',
  },
  extends: [
    // 使用插件中的configs 配置，里面含有rules，env等
    'eslint:recommended', // eslint推荐的规则
    'plugin:@typescript-eslint/recommended', // ts推荐的规则
    'plugin:vue/vue3-recommended', // vue组件特有的规则
    // "plugin:vue/recommended" // vue2使用
    'plugin:prettier/recommended', // eslint-config-prettier 关闭与prettier冲突的规则，prettier接管代码风格。其依赖需要eslint-plugin-prettier
  ],
  rules: {
    'no-undef': 0, // 关掉，typescript已经包含此规则
    // 一下关闭的规则还需要讨论。
    'vue/script-setup-uses-vars': 2,
    'vue/no-setup-props-destructure': 0,
    'vue/multi-word-component-names': 0,
    'vue/no-unused-vars': 0,
    'vue/require-explicit-emits': 0,
    'vue/valid-v-for': 0,
    'vue/require-v-for-key': 1,

    '@typescript-eslint/no-empty-function': 1,
    '@typescript-eslint/ban-ts-comment': 0,
    '@typescript-eslint/no-unused-vars': 1,
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/ban-types': 1,
    '@typescript-eslint/no-namespace': 1,
  },
}

配置prettier的代码风格
也可以不使用prettier风格，全部使用eslint的风格（需要查看eslint文档 样式风格部分自己配置），但是eslint不支持某些文件的格式化，即使已手动配置了eslint格式化。

而prettier支持大多数语言的格式化。

配置prettierrc，供给eslint-plugin-prettier插件使用
.prettierrc

{
  "prettier/prettier": [
    // 配置prettier规则，也可以将所有规则放到.prettierrc 专用配置中
    "warn",
    {
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": false,
      "jsxSingleQuote": true,
      "singleQuote": true,
      "arrowParens": "avoid",
      "bracketSameLine": false,
      "useEditorConfig": false,
      "endOfLine": "auto"
    }
  ]
}

使用命令格式化所有文件

package.json

{
  "scripts": {
    "lint": "eslint  src --ext .vue,.ts --fix"
  }
}

npm run lint 命令格式化 src 所有 ts 和 vue 文件