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, // 用于確定哪些文件需要格式化，可選值是文件路徑字符串或者nullrequirePragma: 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"（從不折行）
}