vite+vue3+ts eslint 不生效的(终极解决办法)

本人以前试了好多方法都不行，最后这个方法可让eslint生效了。。。。少啰嗦看东西

1. vscode安装插件

- Prettier ESLint
- ESLint
复制代码

2.安装插件 yarn或者npn（根据本身的须要使用其一个就行）

yarn的话使用

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
复制代码

npm的话使用

npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier
复制代码

3.vscode的setting.json加入配置

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "eslint.validate": ["typescript","vue"]
复制代码

4.项目根目录新建两个文件.eslintrc.js 和 prettier.config.js

.eslintrc.js里的配置

//.eslintrc.js里的配置
module.exports = {
  /* 指定如何解析语法。能够为空，但若不为空，只能配该值，缘由见下文。*/
  parser: 'vue-eslint-parser',
  /* 扩展配置，加一些插件 */
  extends: [
    'plugin:vue/recommended' /* eslint应用在vue的必须配置 */,
    'plugin:prettier/recommended' /* 使用Prettier */
  ],
  /* 优先级低于parse的语法解析配置 */
  parserOptions: {
    parser: '@typescript-eslint/parser' /* 解析ts语法 */,
    ecmaVersion: 2018,
    sourceType: 'module'
  }
}
复制代码

prettier.config.js里的配置

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false, // 未尾逗号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 单引号
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'none', // 未尾分号
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf'
}
复制代码

over！