vue3 + vite + eslint + prettier

参考文章：

https://blog.csdn.net/qq_53225741/article/details/127113104

https://segmentfault.com/a/1190000041954694

https://blog.csdn.net/m0_37408390/article/details/106456959

结合前两篇的步骤配置了项目，然后依然有各种问题，于是又参考第三篇的规则自己进行了修改

vite.config.js里，要配置plugin。

（resolve alias那部分可以不加，与eslint无关，但我基本上所有项目都会用，就顺便带上了）

import { defineConfig  } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

export default ({  }) => {
  const config = {
    base: './',
    plugins: [
      vue(),
      eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
      })
    ],
    resolve: {
      alias: {
        '@': '/src'
      }
    },

  }
  return defineConfig(config)
}

package.json里的devDependencies

"devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/eslint-parser": "^7.19.1",
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.34.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "vite": "^4.1.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-html": "^3.2.0"
  }

eslint配置（.eslintrc.cjs）

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended',
    'eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
    ecmaFeatures: {
      modules: true,
      jsx: true
    },
    requireConfigFile: false,
    parser: '@babel/eslint-parser'
  },
  plugins: ['eslint-plugin-vue', 'eslint-plugin-prettier'],
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  rules: {
    'prettier/prettier': 'off',
    'no-console': 'warn', // 禁止出现console
    'no-debugger': 'warn', // 禁止出现debugger
    'no-duplicate-case': 'warn', // 禁止出现重复case
    'no-empty': 'warn', // 禁止出现空语句块
    'no-extra-parens': 'warn', // 禁止不必要的括号
    'no-extra-semi': 'warn', // 禁止多余的分号
    'no-func-assign': 'warn', // 禁止对Function声明重新赋值
    'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
    'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
    'no-empty-function': 'warn', // 禁止出现空的函数块
    'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
    'no-multi-spaces': 'warn', // 禁止使用多个空格
    'no-redeclare': 'warn', // 禁止多次声明同一变量
    'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
    'no-return-await': 'warn', // 禁用不必要的[return/await]
    'no-self-compare': 'warn', // 禁止自身比较表达式
    'no-useless-catch': 'warn', // 禁止不必要的catch子句
    'no-useless-return': 'warn', // 禁止不必要的return语句
    'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
    'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
    'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
    'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
    'no-var': 'warn', // 禁止出现var用let和const代替
    'no-delete-var': 'off', // 允许出现delete变量的使用
    'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
    'dot-notation': 'warn', // 要求尽可能地使用点号
    'default-case': 'warn', // 要求switch语句中有default分支
    eqeqeq: 'warn', // 要求使用 === 和 !==
    curly: 'warn', // 要求所有控制语句使用一致的括号风格
    semi: ['warn', 'never', { beforeStatementContinuationChars: 'always' }], // 如果下一行继续，尾部才需要加分号
    'semi-spacing': [0, { before: false, after: true }], //分号前后空格
    'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
    'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
    'space-infix-ops': 'warn', // 要求操作符周围有空格
    'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
    'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
    'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
    'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格
    'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
    camelcase: 'warn', // 要求使用骆驼拼写法命名约定
    indent: ['warn', 2], // 要求使用JS一致缩进2个空格
    'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4
    'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20
    'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
    'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量
    quotes: ['warn', 'single', 'avoid-escape'], // 要求统一使用单引号符号
    'vue/require-default-prop': 0, // 关闭属性参数必须默认值
    'vue/singleline-html-element-content-newline': 0, // 关闭单行元素必须换行符
    'vue/multiline-html-element-content-newline': 0, // 关闭多行元素必须换行符
    // 要求每一行标签的最大属性不超五个
    'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
    // 要求html标签的缩进为需要2个空格
    'vue/html-indent': [
      'warn',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    // 取消关闭标签不能自闭合的限制设置
    'vue/html-self-closing': 0,
    'vue/multi-word-component-names': 0
  }
}

prettier配置（.prettierrc）

{
  "tabWidth": 2,               
  "semi": false,               
  "trailingComma": "none",     
  "singleQuote": true,         
  "printWidth": 120,           
  "arrowParens": "avoid",      
  "bracketSpacing": true,      
  "endOfLine": "auto",         
  "useTabs": false,            
  "quoteProps": "as-needed",   
  "jsxSingleQuote": false,     
  "jsxBracketSameLine": false, 
  "rangeStart": 0,                    
  "requirePragma": false,     
  "insertPragma": false,      
  "proseWrap": "preserve",     
  "htmlWhitespaceSensitivity": "css"  
}

vs code的设置要把tab size改成2

具体操作如下图：齿轮 -> Settings -> 搜索'tab size', 把输入框中数字改为2

vs code配置prettier

具体操作如下图：齿轮 -> Settings -> 搜索'prettier', 把Config Path改为'.prettierrc.js'