vue3(ts、setup)的eslint配置（prettier）

依賴安裝

   "eslint": "^8.13.0",
   "eslint-config-prettier": "^8.5.0",
   "eslint-plugin-import": "^2.26.0",
   "eslint-plugin-node": "^11.1.0",
   "eslint-plugin-prettier": "^4.0.0",
   "eslint-plugin-promise": "^6.0.0",
   "eslint-plugin-vue": "^8.6.0",
   "eslint-webpack-plugin": "^3.1.1",
   "@typescript-eslint/eslint-plugin": "^5.19.0",
   "@typescript-eslint/parser": "^5.19.0",
   "prettier": "^2.6.2",

eslint配置

新增.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    'vue/setup-compiler-macros': true // vue3寫法的校驗，會導致一些vue一些預設的方法提示報錯，不需要重新import, 例如'defineProps' is not defined
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  rules: {
    '@typescript-eslint/no-empty-function': 'off', // 允許空函數
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }
    ],
    'prefer-const': [
      // 不允許let定義常量
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false
      }
    ],
    'space-before-function-paren': 'off', // 去掉函數前面的空格
    'vue/multi-word-component-names': 'off',
    'vue/custom-event-name-casing': 'off', // 自定義事件名稱駝峯關閉
    'vue/name-property-casing': ['error', 'PascalCase'], // 組件名稱需要爲駝峯
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'never',
          normal: 'always',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ]
  }
}

prettierr配置

新增.prettierrc.js

module.exports = {
  endOfLine: 'auto', // 允許代碼結尾是回車或者換行，\n\r
  printWidth: 120, // 換行字符串閾值
  tabWidth: 2, // 水平縮進的空格數
  useTabs: false,
  semi: false, // 句末是否加分號
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用單引號
  trailingComma: 'none', // 最後一個對象元素加逗號
  bracketSpacing: true, // 對象，數組加空格
  jsxBracketSameLine: true, // jsx > 是否另起一行
  arrowParens: 'always' // (x) => {} 是否要有小括號
}

vscode配置，自動保存格式化

{
  "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 需要的話請手動打開
    // "source.fixAll": true
  },
  "eslint.validate": ["javascript", "html", "vue", "ts"],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": ".prettierrc.js" // 這裏直接讀取項目的 prettier 配置文件
}