eslint 与 prettier 的一些常见的配置项（很详细）

目录

1、eslint 常见配置项（语法规范）

2、 prettier 常见的配置项（格式规范）

• 代码规范相关内容看小编的该文章，获取对你有更好的帮助

vsCode代码格式化（理解eslint、vetur、prettier，实现格式化文档以及ctrl+s保存自动格式化文档，保证代码格式的统一，相对规范，以及一些常见问题实战解决）_vscode格式化文档插件-CSDN博客

1、eslint 常见配置项（语法规范）

• 当看到这些配置项是不是有一点懵圈呢，又有英文又有数字的

• 那么，首先先理解我们配置过程中规则的严重程度有三个级别分别代表着什么，如下：

0 或者 "off"：关闭规则，不进行检查。
1 或者 "warn"：打开规则，并将违反该配置的视为一个警告（不会导致程序退出）。
2 或者 "error"：打开规则，并将违反该配置的视为一个错误（会导致程序退出）

• 注意代码中0、1、2与off、warn、error其实是对应一致的；配置warn与error则是相当于打开规则，当与该规则相违背时则会给出警告/错误(一定要看清除上面所说)
• 以下是一些eslint常见的配置项：（注意eslint规范的是语法）

"eqeqeq": 0, // 使用 === 替代 == allow-null允许null和undefined== [2, "allow-null"]
"camelcase": 0, // 双峰驼命名格式
"semi": 0, // 行尾不使用分号
"quotes": [1, "single"], // 强制一致地使用反引号、双引号或单引号。
"one-var": 2, // 强制函数中的变量在一起声明或分开声明
"generator-star-spacing": "off", // 强制 generator 函数中 * 号周围使用一致的空格
"space-before-function-paren": 0, // 强制方法名和括号之间需要有一格空格
"vue/multi-word-component-names": "off", // 强制文件名驼峰命名
"vue/no-mutating-props": "off", // 强制 Vue 组件中直接改变传入的 props不可修改
"vue/no-side-effects-in-computed-properties": "off", // 强制对计算属性的修改
"vue/no-reserved-component-names": "off", // 强制组件名称始终为 “-” 连接的单词
"vue/no-dupe-v-else-if": "off", // 强制v-if-else指令之间的条件是互斥的
"no-console": process.env.NODE_ENV === "production" ? "error" : "off", // 禁用 console
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", // 禁用 debugger
"no-dupe-args": 2, // 函数参数不能重复
"no-func-assign": 2, // 禁止重复的函数声明
"no-duplicate-case": 2, // 禁止重复的 case 标签
"no-undef": 1, // 禁用未声明的变量
"no-multi-spaces": 2, // 禁止出现多个空格
"no-label-var": 2, // 不允许标签与变量同名
"no-tabs": 1, // 禁止tab
"no-shadow": 0, // 禁止 var 声明 与外层作用域的变量同名
"no-else-return": 0, // 禁止 if 语句中有 return 之后有 else
"no-empty-function": 1, // 禁止出现空函数.如果一个函数包含了一条注释，它将不会被认为有问题。
"no-unused-vars": 1, // 禁止出现未使用过的变量
"no-return-assign": 0, // 禁止在返回语句中赋值
"no-trailing-spaces": 2, // 禁用行尾空格
"no-const-assign": 2, // 禁止修改 const 声明的变量
"no-dupe-class-members": 2, // 禁止类成员中出现重复的名称
"no-alert": process.env.NODE_ENV === "production" ? "error" : "off", // 禁止使用alert confirm promp
"no-extra-semi": 2, // 禁止多余的冒号
"no-constant-condition": 2, // 禁止在条件中使用常量表达式
"no-multiple-empty-lines": [1, { max: 2 }], // 空行最多不能超过2行
"no-unused-expressions": 1, // 禁止无用的表达式
"no-lone-blocks": 2, // 禁用不必要的嵌套块
"no-sequences": 2, // 不允许使用逗号操作符
"no-irregular-whitespace": 2, // 禁止不规则的空白
"space-before-function-paren": 0, // 函数括号前的空格
"handle-callback-err": 1, // 处理回调错误
"prefer-promise-reject-errors": 0, // 首选承诺拒绝错误
"spaced-comment": 1, // 要求或禁止在注释前有空白 (space 或 tab)
"keyword-spacing": 1, // 强制关键字周围空格的一致性
"object-curly-spacing": 1, // 强制在花括号中使用一致的空格
"comma-spacing": [ // 控制逗号前后的空格
  2,
  {
    before: false,
    after: true
  }
],
"newline-after-var": 0, // 要求或禁止 var 声明语句后有一行空行
"indent": 0, // 强制使用一致的缩进
"vue/html-indent": 0, // html 内 缩进
"vue/mustache-interpolation-spacing": 0, // 插值两端必须留一个空格
"vue/max-attributes-per-line": 0, // 强制每行的最大属性数
"vue/attributes-order": 0, // vue属性顺序
"key-spacing": 0, // 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };"
"comma-dangle": 0, // 禁止末尾逗号
"space-before-blocks": 0, // 强制在块之前使用一致的空格 "function a() {}"
"space-infix-ops": 2, // 要求操作符周围有空格 "a ? b : c"
"arrow-spacing": 2, // 强制箭头函数前后使用一致的空格 "() => {};" 
"vue/order-in-components": 0, // 强制组件中的属性顺序
"vue/no-dupe-keys": 2, // 不允许字段名称重复
"import/no-duplicates": 2, // 多次引用同个包
"vue/valid-v-for": 2, // 执行有效v-for指令
"vue/require-v-for-key": 2, // v-bind:key使用v-for指令要求
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }], // 不允许解析错误<template>
"vue/html-self-closing": "off", // 强制执行自闭式
"vue/no-side-effects-in-computed-properties": 0, // 不允许计算属性中的副作用
"vue/no-unused-vars": 1, // 禁止 v-for 指令或范围属性的未使用变量定义
"vue/valid-v-model": 2, // 执行有效v-model指令
"vue/valid-template-root": 2 // 强制执行有效的模板根

2、 prettier 常见的配置项（格式规范）

• 以下是一些prettier常见的配置项：(而prettier规范的是格式)

module.exports = {
    printWidth: 150, // 单行代码的最大长度（字符个数，超过会折行），可选值是任意整数
    tabWidth: 2, // 一个制表符等于的空格数，可选值是任意整数
    useTabs: false, // 是否使用制表符代替空格，可选值是true（使用制表符）或false（使用空格）
    semi: true, // 是否在语句末尾添加分号，可选值是true（添加分号）或false（不添加分号）
    singleQuote: true, // 是否使用单引号，可选值是true（使用单引号）或false（使用双引号）
    quoteProps: "as-needed", // 属性名是否使用引号，当有需要时，可选值是"as-needed"（只在必要时加引号）或"consistent"（保持一致性）
    jsxSingleQuote: false, // 在JSX中是否使用单引号，可选值是true（使用单引号）或false（使用双引号）
    trailingComma: "none", // 对象或数组最后一个元素后是否加逗号，可选值是"none"（不加逗号）, "es5"（在ES5中有效的地方加逗号） 或 "all"（包括函数参数尾部的逗号）
    bracketSpacing: true, // 对象字面量的括号间是否加空格，可选值是true（加空格）或false（不加空格）
    jsxBracketSameLine: false, // 在JSX中的 '>' 符号是否与标签的最后一行末尾对齐，可选值是true（与标签的最后一行末尾对齐）或false（另起一行）
    arrowParens: "avoid", // 是否总是给箭头函数的参数加上括号，可选值是"avoid"（只在需要时添加括号）或"always"（总是添加括号）
    rangeStart: 0, // 在某个字符处启动格式化（与rangeEnd配合使用），可选值是任意整数
    rangeEnd: Infinity, // 格式化到某个字符处（与rangeStart配合使用），可选值是任意整数
    parser: "babel", // 使用的解析器，如 'babel', 'flow', 'typescript' 等，可选值是解析器的名称字符串
    filepath: null, // 用于确定哪些文件需要格式化，可选值是文件路径字符串或者null
    requirePragma: false, // 是否需要特殊标记（如 '@format'）才会格式化文件，可选值是true（需要标记）或false（不需要标记）
    insertPragma: false, // 是否插入特殊标记（如 '@format'）来格式化文件，可选值是true（插入标记）或false（不插入标记）
    overrides: [], // 针对某些文件类型的特殊配置，可选值是数组，数组元素是对象
    endOfLine: "auto", // 换行符的样式，可选值是"auto"（根据文件中的第一行决定换行符类型）, "lf"（强制使用 LF 作为换行符）, "crlf"（强制使用 CRLF 作为换行符） 或 "cr"（强制使用 CR 作为换行符）
    embeddedLanguageFormatting: "auto", // 是否格式化内嵌的代码语言，可选值是"auto"（自动）， "off"（不格式化内嵌的代码语言）， "on"（始终格式化内嵌的代码语言）
    proseWrap: "preserve" // 是否要换行符折行，可选值是"preserve"（保持原样）, "always"（始终折行）， "never"（从不折行）
}