vue3+eslint7.32.0 自动修复规范代码 开发工具 webstorm

安装指定的eslint

//package.json  的devDependencies 加上  运行npm i
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.13.0",

设置eslint 规则文件.eslintrc.js

module.exports = {
  root: true, //停止在父级目录中寻找
  env: {
    browser: true, // 浏览器全局变量
    es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
    node: true, // 浏览器全局变量
  },
  extends: [
    "eslint:recommended", // eslint 推荐版本 recommended
    "plugin:vue/essential", //vue官方eslint插件配置eslint-plugin-vue
    "plugin:prettier/recommended",
  ],
  globals: {
    template: false, // false 不允许被重写
    document: false,
    navigator: false,
    window: false,
    uni: true,
    Component: true,
  },
  parserOptions: {
    parser: "babel-eslint", //词法解析器使用babel-eslint，以更好的适配es6的新api
    ecmaVersion: 6, //启用 ES6 语法支持;默认设置为3，5（默认），
    sourceType: "module", //设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
  },
  plugins: [
    "vue", // 此插件用来识别 .vue文件中的 代码
  ],
  rules: {
    /**
     * 代码中可能的错误或逻辑错误
     */
    "no-console": "off", //开发时候使用  打包后禁用 console
    "no-debugger": "off", //开发时候使用  打包后禁用 debugger
    "no-control-regex": ["off"], // 允许在正则表达式中使用控制字符
    "no-unsafe-finally": ["off"], // 允许在 finally 语句块中出现控制流语句

    "no-cond-assign": ["error", "always"], // 禁止条件表达式中出现赋值操作符
    "no-constant-condition": ["error", { checkLoops: true }], // 禁止在条件中使用常量表达式
    "no-dupe-args": ["error"], // 禁止 function 定义中出现重名参数
    "no-dupe-keys": ["error"], // 禁止对象字面量中出现重复的 key
    "no-duplicate-case": ["error"], // 禁止出现重复的 case 标签
    "no-empty": ["error", { allowEmptyCatch: true }], // 禁止出现空语句块
    "no-empty-character-class": ["error"], // 禁止在正则表达式中使用空字符集
    "no-ex-assign": ["error"], // 禁止对 catch 子句的参数重新赋值
    "no-extra-boolean-cast": ["error"], // 禁止不必要的布尔转换
    "no-extra-semi": ["error"], // 禁止不必要的分号
    "no-func-assign": ["warn"], // 禁止对 function 声明重新赋值
    "no-inner-declarations": ["error"], // 禁止在嵌套的块中出现变量声明或 function 声明
    "no-invalid-regexp": ["error", { allowConstructorFlags: [] }], // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
    "no-irregular-whitespace": ["error"], // 禁止在字符串和注释之外不规则的空白
    "no-obj-calls": ["error"], // 禁止把全局对象作为函数调用
    "no-regex-spaces": ["error"], // 禁止正则表达式字面量中出现多个空格
    "no-sparse-arrays": ["error"], // 禁用稀疏数组
    "no-unexpected-multiline": ["error"], // 禁止出现令人困惑的多行表达式
    "no-unsafe-negation": ["error"], // 禁止对关系运算符的左操作数使用否定操作符
    "use-isnan": ["error"], // 要求使用 isNaN() 检查 NaN

    /**
     * 最佳实践
     */
    "no-empty-function": ["off"], // 禁止出现空函数

    "default-case": ["error"], // 要求 switch 语句中有 default 分支
    "dot-notation": ["error"], // 强制尽可能地使用点号
    // eqeqeq: ["warn"], // 要求使用 === 和 !==
    "no-caller": ["error"], // 禁用 arguments.caller 或 arguments.callee
    "no-case-declarations": ["error"], // 不允许在 case 子句中使用词法声明
    "no-empty-pattern": ["error"], // 禁止使用空解构模式
    "no-eval": ["error"], // 禁用 eval()
    "no-global-assign": ["error"], // 禁止对原生对象或只读的全局对象进行赋值
    "no-redeclare": ["error", { builtinGlobals: true }], // 禁止重新声明变量
    "no-self-assign": ["error", { props: true }], // 禁止自我赋值
    "no-unused-labels": ["error"], // 禁用出现未使用过的标
    "no-useless-escape": ["error"], // 禁用不必要的转义字符
    // "no-magic-numbers": ["error", { "ignoreArrayIndexes": true }], // 禁用魔术数字
    //"radix": ["error"], // 强制在parseInt()使用基数参数

    /**
     * 变量声明
     */
    "no-unused-vars": ["off"], // 禁止出现未使用过的变量

    "no-delete-var": ["error"], // 禁止删除变量
    "no-undef": ["error"], // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    "no-use-before-define": ["error"], // 禁止在变量定义之前使用它们

    /**
     * 风格指南
     */
    quotes: ["error", "double"], // 使用双引号
    indent: ["off"], // 两个空格缩进
    "line-comment-position": [
      "error",
      { position: "above", ignorePattern: "ETC" },
    ], // 强制行注释的位置   强制行注释只在代码上方，单独成行
    semi: ["error", "always"], // 要求或禁止使用分号代替 ASI
    "consistent-this": ["error", "that"], // 当获取当前执行环境的上下文时，强制使用一致的命名 ?
    "func-names": ["off"], // 要求或禁止使用命名的 function 表达式
    "func-style": ["error", "declaration", { allowArrowFunctions: true }], // 强制一致地使用 function 声明或表达式 "allowArrowFunctions": true (默认为 false) 允许使用箭头函数
    "new-cap": ["error", { capIsNew: false }], // 要求构造函数首字母大写 允许调用首字母大写的函数时没有 new 操作符
    "linebreak-style": ["off", "windows"], // 换行符风格/ 换行符风格

    "array-bracket-newline": ["error", { multiline: true }], // 在数组开括号后和闭括号前强制换行
    "array-bracket-spacing": ["error", "never"], //  (默认) 禁止在数组括号内出现空格
    "block-spacing": ["error", "never"], // 禁止或强制在代码块中开括号前和闭括号后有空格
    "brace-style": ["error", "1tbs"], // 强制在代码块中使用一致的大括号风格
    "comma-dangle": ["error", "always-multiline"], // 要求或禁止末尾逗号
    "comma-spacing": ["error", { before: false, after: true }], // 强制在逗号前后使用一致的空格
    "comma-style": ["error", "last"], // 强制使用一致的逗号风格
    "computed-property-spacing": ["error", "never"], // 强制在计算的属性的方括号中使用一致的空格
    "eol-last": ["error", "always"], // 要求或禁止文件末尾存在空行
    "func-call-spacing": ["error", "never"], // 要求或禁止在函数标识符和其调用之间有空格
    "function-paren-newline": ["error", "multiline"], // 强制在函数括号内使用一致的换行
    "implicit-arrow-linebreak": ["error", "beside"], // 强制隐式返回的箭头函数体的位置
    "jsx-quotes": ["error", "prefer-double"], // 强制在 JSX 属性中一致地使用双引号或单引号
    "key-spacing": ["error", { beforeColon: false, afterColon: true }], // 强制在对象字面量的属性中键和值之间使用一致的间距
    "max-depth": ["error", 4], // 强制可嵌套的块的最大深度
    "max-nested-callbacks": ["error", 3], // 强制回调函数最大嵌套深度
    "max-params": ["error", 6], // 强制函数定义中最多允许的参数数量
    "multiline-comment-style": ["error", "separate-lines"], // 强制对多行注释使用特定风格
    "multiline-ternary": ["error", "always-multiline"], // 要求或禁止在三元操作数中间换行
    "no-array-constructor": ["error"], // 禁用 Array 构造函数
    "no-mixed-operators": ["error"], // 禁止混合使用不同的操作符
    "no-mixed-spaces-and-tabs": ["error"], // 禁止空格和 tab 的混合缩进
    "no-multiple-empty-lines": ["error"], // 禁止出现多行空行
    "no-new-object": ["error"], // 禁用 Object 的构造函数
    "no-tabs": ["off"], // 禁用 tab
    "no-trailing-spaces": [
      "error",
      { skipBlankLines: false, ignoreComments: false },
    ], // 禁用行尾空白
    "no-whitespace-before-property": ["error"], // 禁止属性前有空白
    "nonblock-statement-body-position": ["error", "beside"], // 强制单个语句的位置
    "object-curly-spacing": ["error", "always"], // 强制在大括号中使用一致的空格
    "operator-linebreak": [
      "error",
      "after",
      { overrides: { "?": "before", ":": "before" } },
    ], // 强制操作符使用一致的换行符
    "semi-spacing": ["error", { before: false, after: true }], // 强制分号之前和之后使用一致的空格
    "space-before-function-paren": ["off", "never"], // 强制在 function的左括号之前使用一致的空格
    "space-in-parens": ["error", "never"], // 强制在圆括号内使用一致的空格
    "space-infix-ops": ["error"], // 要求操作符周围有空格
    "space-unary-ops": ["error", { words: true, nonwords: false }], // 强制在一元操作符前后使用一致的空格
    "spaced-comment": ["error", "always"], // 强制在注释中 // 或 /* 使用一致的空格  "always"，// 或 /* 必须跟随至少一个空白。

    /**
     * ECMAScript 6
     */
    "arrow-spacing": ["error", { before: true, after: true }], // 强制箭头函数的箭头前后使用一致的空格
    "no-var": ["error"], // 要求使用 let 或 const 而不是 var
    "object-shorthand": ["error", "always"], // 要求或禁止对象字面量中方法和属性使用简写语法
    "prefer-arrow-callback": ["error", { allowNamedFunctions: false }], // 要求回调函数使用箭头函数

    /**
     * vue 的代码风格
     */
    "vue/max-attributes-per-line": [
      2, // 开启错误提示
      {
        singleline: 5, // 每行的最大属性数 默认值为1
        multiline: {
          max: 3, // 每行的最大属性数
          allowFirstLine: false, // 属性与该标签名称在同一行
        },
      },
    ], // 多个特性的元素应该分多行撰写，每个特性一行
    "vue/attribute-hyphenation": 0, // 关闭 闭连字符属性名称
    "vue/html-self-closing": 0, // 关闭 自我封闭的风格
    "vue/component-name-in-template-casing": 0, // 关闭 组件命名样式强制使用特定的大小写
    "vue/html-closing-bracket-spacing": 0, // 关闭右括号之前强制执行一致的间距样式
    "vue/singleline-html-element-content-newline": 0, // 关闭  单行元素的内容之前和之后强制换行
    "vue/no-unused-components": 0, // 关闭  禁止注册模板中未使用的组件
    "vue/multiline-html-element-content-newline": 0, // 关闭  在多行元素的内容之前和之后需要换行
    "vue/no-use-v-if-with-v-for": 0, // 关闭   禁止在与v-for相同的元素上使用v-if
    "vue/html-closing-bracket-newline": 0, // 关闭  在标签的右括号之前要求或不允许换行
    "vue/no-parsing-error": 0, // 关闭  禁止解析错误
  },
};

设置eslint 排除文件.eslintignore

/unpackage
/wxcomponents
/sdk
/node
/node_modules
/dist
/.hbuilderx
/.automator
.eslintrc.js
prettier.config.js
babel.config.js
jest.config.js
stylelint.config.js
lint-staged.config.js
/.husky
/router
manifest.json

*.nvue

/components/uni-*

设置prettier.config.js

//  https://www.jianshu.com/p/d6a69eb08f07
//  https://segmentfault.com/a/1190000012909159
module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: false, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: "es5", // none - 无尾逗号 es5 - 添加es5中被支持的尾逗号 all - 所有可能的地方都被添加尾逗号 (默认es5)
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: "always", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号（默认avoid）
  htmlWhitespaceSensitivity: "ignore", // 为 HTML 文件定义全局空格敏感度
  endOfLine: "lf", // 换行符

  vueIndentScriptAndStyle: true, // true - 缩进Vue文件中的脚本和样式标签 （默认false ）
  quoteProps: "as-needed", // “as-needed” - 仅在需要时在对象属性周围添加引号  （默认as-needed ）
  insertPragma: false, // 在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了(默认false ）
  requirePragma: false, // 严格按照文件顶部的一些特殊的注释格式化代码(默认false ）
  proseWrap: "never", // never " - 不折行 " perserve " - 按照文件原样折行 （v1.9.0+） (默认perserve  ）
  overrides: [
    {
      files: "*.md",
      options: {
        tabWidth: 2,
      },
    },
  ],
};

设置开发工具

设置快捷键修复