VScode ESLint Tips

在Vue3 + Vite 环境中

• package.json文件

    "@rushstack/eslint-patch": "^1.1.4",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.3.0",
    "prettier": "^2.7.1",

• 创建.eslintrc.js文件

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended', // 如果同时使用了eslint和prettier发生冲突了，会关闭掉与prettier有冲突的规则，也就是使用prettier认为对的规则
    'prettier',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
  },
  rules: {
    'prettier/prettier': ['warn', { singleQuote: true }],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 添加组件命名忽略规则
    'vue/multi-word-component-names': 'off',
    'vue/comment-directive': 'off',
  },
};

• 创建.prettierrc.json文件

{
  "bracketSameLine": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 120,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

• VScode 安装 Eslint与Prettier插件

• 可以通过VScode的Setting.json配置文件配置

{
    "eslint.enable": true, // 开启eslint检查
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

• 按F1 输入ESLint 选择Show Output Channel 查看当前ESLint报错信息，从而排查错误