vue项目配置eslint步骤总结

1. 安装eslint

yarn add eslint@7 -D
yarn add eslint-plugin-vue eslint-plugin-prettier prettier -D

2. 初始化ESLint配置

npx eslint --init

3. 配置文件编辑
   手动调整.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "globals": {
        "uni": "readonly",
        "wx": "readonly",
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        "vue/no-multiple-template-root": "off",
        "no-debugger": "off",
        "vue/multi-word-component-names": "off",
        "vue/no-v-model-argument": "off"
    }
};

4. 配置文件编辑
   手动调整.prettierrc.js文件

module.exports = {
  printWidth: 80, // 80 每行代码长度
  tabWidth: 2, // 每个 tab 相当于多少个空格
  useTabs: false, // 是否使用 tab 进行缩进
  singleQuote: true// 是否使用单引号
  semi: true, // 声明结尾使用分号
  trailingComma: 'none', // 对象尾逗号
  bracketSpacing: true, // 对象字面量的大括号间使用空格
  jsxSingleQuote: false,
  jsxBracketSameLine: false, // false 多行 jsx 中的 > 放在最后一行，而不是另起一行
  arrowParens: 'avoid', // avoid 只有一个参数是否带圆括号
  vueIndentScriptAndStyle: true, // vue文件的script标签和Style标签下的内容需要缩进
  singleAttributePerLine: false, // 在 HTML、Vue 和 JSX 中每行强制执行单个属性
  embeddedLanguageFormatting: 'auto' // 控制 Prettier 是否格式化文件中嵌入的引用代码
};

4. 在scripts中添加命令

"scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.jsx --fix",
    "prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
  },

===
还可以集成到提交代码的钩子中。