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！