先安裝插件 eslint Prettier - Code formatter vetur
vsCode 左下角 --設定 – 使用者 – 功能 – 終端 – 在setting.json設定
{
// tab 大小為2個空格
"editor.tabSize": 2,
// 100 列後換行
"editor.wordWrapColumn": 100,
// 儲存時格式化
"editor.formatOnSave": true,
// 開啟 vscode 檔案路徑導航
"breadcrumbs.enabled": true,
// prettier 設定語句末尾不加分号
"prettier.semi": false,
// prettier 設定強制單引号
"prettier.singleQuote": true,
// 選擇 vue 檔案中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 顯示 markdown 中英文切換時産生的特殊字元
"editor.renderControlCharacters": true,
// 設定 eslint 儲存時自動修複
"eslint.autoFixOnSave": true,
// eslint 檢測檔案類型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定義設定
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"terminal.integrated.env.windows": {},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"window.zoomLevel": 0,
"task.slowProviderWarning": null
}
對于 .eslintrc.js 檔案配置
module.exports = {
// 環境定義了預定義的全局變量。
env: {
//環境定義了預定義的全局變量。更多在官網檢視
browser: true,
node: true,
commonjs: true,
amd: true,
es6: true,
mocha: true
},
// JavaScript 語言選項
parserOptions: {
// ECMAScript 版本
ecmaVersion: 6,
sourceType: "script", //module
// 想使用的額外的語言特性:
ecmaFeatures: {
// 允許在全局作用域下使用 return 語句
globalReturn: true,
// impliedStric
impliedStrict: true,
// 啟用 JSX
jsx: true
}
},
/**
* "off" 或 0 - 關閉規則
* "warn" 或 1 - 開啟規則，使用警告級别的錯誤：warn (不會導緻程式退出),
* "error" 或 2 - 開啟規則，使用錯誤級别的錯誤：error (當被觸發的時候，程式會退出)
*/
rules: {
// 可能的錯誤 //
// 禁止條件表達式中出現指派操作符
"no-cond-assign": 2,
// 禁用 console
"no-console": 0,
// 禁止在條件中使用常量表達式
// if (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition": 2,
// 禁止在正規表達式中使用控制字元 ：new RegExp("\x1f")
"no-control-regex": 2,
// 數組和對象鍵值對最後一個逗号， never參數：不能帶末尾的逗号, always參數：必須帶末尾的逗号，
// always-multiline：多行模式必須帶逗号，單行模式不能帶逗号
"comma-dangle": [1, "always-multiline"],
// 禁用 debugger
"no-debugger": 2,
// 禁止 function 定義中出現重名參數
"no-dupe-args": 2,
// 禁止對象字面量中出現重複的 key
"no-dupe-keys": 2,
// 禁止重複的 case 标簽
"no-duplicate-case": 2,
// 禁止空語句塊
"no-empty": 2,
// 禁止在正規表達式中使用空字元集 (/^abc[]/)
"no-empty-character-class": 2,
// 禁止對 catch 子句的參數重新指派
"no-ex-assign": 2,
// 禁止不必要的布爾轉換
"no-extra-boolean-cast": 2,
// 禁止不必要的括号 //(a * b) + c;//報錯
"no-extra-parens": 0,
// 禁止不必要的分号
"no-extra-semi": 2,
// 禁止對 function 聲明重新指派
"no-func-assign": 2,
// 禁止在嵌套的塊中出現 function 或 var 聲明
"no-inner-declarations": [2, "functions"],
// 禁止 RegExp 構造函數中無效的正規表達式字元串
"no-invalid-regexp": 2,
// 禁止在字元串和注釋之外不規則的空白
"no-irregular-whitespace": 2,
// 禁止在 in 表達式中出現否定的左操作數
"no-negated-in-lhs": 2,
// 禁止把全局對象 (Math 和 JSON) 作為函數調用 錯誤：var math = Math();
"no-obj-calls": 2,
// 禁止直接使用 Object.prototypes 的内置屬性
"no-prototype-builtins": 0,
// 禁止正規表達式字面量中出現多個空格
"no-regex-spaces": 2,
// 禁用稀疏數組
"no-sparse-arrays": 2,
// 禁止出現令人困惑的多行表達式
"no-unexpected-multiline": 2,
// 禁止在return、throw、continue 和 break語句之後出現不可達代碼
/*
function foo() {
return true;
console.log("done");
}//錯誤
*/
"no-unreachable": 2,
// 要求使用 isNaN() 檢查 NaN
"use-isnan": 2,
// 強制使用有效的 JSDoc 注釋
"valid-jsdoc": 1,
// 強制 typeof 表達式與有效的字元串進行比較
// typeof foo === "undefimed" 錯誤
"valid-typeof": 2,
//
// 最佳實踐 //
//
// 定義對象的set存取器屬性時，強制定義get
"accessor-pairs": 2,
// 強制數組方法的回調函數中有 return 語句
"array-callback-return": 0,
// 強制把變量的使用限制在其定義的作用域範圍内
"block-scoped-var": 0,
// 限制圈複雜度，也就是類似if else能連續接多少個
complexity: [2, 9],
// 要求 return 語句要麼總是指定傳回的值，要麼不指定
"consistent-return": 0,
// 強制所有控制語句使用一緻的括号風格
curly: [2, "all"],
// switch 語句強制 default 分支，也可添加 // no default 注釋取消此次警告
"default-case": 2,
// 強制object.key 中 . 的位置，參數:
// property，'.'号應與屬性在同一行
// object, '.' 号應與對象名在同一行
"dot-location": [2, "property"],
// 強制使用.号取屬性
// 參數： allowKeywords：true 使用保留字做屬性名時，隻能使用.方式取屬性
// false 使用保留字做屬性名時, 隻能使用[]方式取屬性 e.g [2, {"allowKeywords": false}]
// allowPattern: 當屬性名比對提供的正規表達式時，允許使用[]方式取值,否則隻能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
"dot-notation": [
2,
{
allowKeywords: false
}
],
// 使用 === 替代 == allow-null允許null和undefined==
eqeqeq: [2, "allow-null"],
// 要求 for-in 循環中有一個 if 語句
"guard-for-in": 2,
// 禁用 alert、confirm 和 prompt
"no-alert": 0,
// 禁用 arguments.caller 或 arguments.callee
"no-caller": 2,
// 不允許在 case 子句中使用詞法聲明
"no-case-declarations": 2,
// 禁止除法操作符顯式的出現在正規表達式開始的位置
"no-div-regex": 2,
// 禁止 if 語句中有 return 之後有 else
"no-else-return": 0,
// 禁止出現空函數.如果一個函數包含了一條注釋，它将不會被認為有問題。
"no-empty-function": 2,
// 禁止使用空解構模式no-empty-pattern
"no-empty-pattern": 2,
// 禁止在沒有類型檢查操作符的情況下與 null 進行比較
"no-eq-null": 1,
// 禁用 eval()
"no-eval": 2,
// 禁止擴充原生類型
"no-extend-native": 2,
// 禁止不必要的 .bind() 調用
"no-extra-bind": 2,
// 禁用不必要的标簽
"no-extra-label:": 0,
// 禁止 case 語句落空
"no-fallthrough": 2,
// 禁止數字字面量中使用前導和末尾小數點
"no-floating-decimal": 2,
// 禁止使用短符号進行類型轉換(!!fOO)
"no-implicit-coercion": 0,
// 禁止在全局範圍内使用 var 和命名的 function 聲明
"no-implicit-globals": 1,
// 禁止使用類似 eval() 的方法
"no-implied-eval": 2,
// 禁止 this 關鍵字出現在類和類對象之外
"no-invalid-this": 0,
// 禁用 __iterator__ 屬性
"no-iterator": 2,
// 禁用标簽語句
"no-labels": 2,
// 禁用不必要的嵌套塊
"no-lone-blocks": 2,
// 禁止在循環中出現 function 聲明和表達式
"no-loop-func": 1,
// 禁用魔術數字(3.14什麼的用常量代替)
"no-magic-numbers": [
1,
{
ignore: [0, -1, 1]
}
],
// 禁止使用多個空格
"no-multi-spaces": 2,
// 禁止使用多行字元串，在 JavaScript 中，可以在新行之前使用斜線建立多行字元串
"no-multi-str": 2,
// 禁止對原生對象指派
"no-native-reassign": 2,
// 禁止在非指派或條件語句中使用 new 操作符
"no-new": 2,
// 禁止對 Function 對象使用 new 操作符
"no-new-func": 0,
// 禁止對 String，Number 和 Boolean 使用 new 操作符
"no-new-wrappers": 2,
// 禁用八進制字面量
"no-octal": 2,
// 禁止在字元串中使用八進制轉義序列
"no-octal-escape": 2,
// 不允許對 function 的參數進行重新指派
"no-param-reassign": 0,
// 禁用 __proto__ 屬性
"no-proto": 2,
// 禁止使用 var 多次聲明同一變量
"no-redeclare": 2,
// 禁用指定的通過 require 加載的子產品
"no-return-assign": 0,
// 禁止使用 javascript: url
"no-script-url": 0,
// 禁止自我指派
"no-self-assign": 2,
// 禁止自身比較
"no-self-compare": 2,
// 禁用逗号操作符
"no-sequences": 2,
// 禁止抛出非異常字面量
"no-throw-literal": 2,
// 禁用一成不變的循環條件
"no-unmodified-loop-condition": 2,
// 禁止出現未使用過的表達式
"no-unused-expressions": 0,
// 禁用未使用過的标簽
"no-unused-labels": 2,
// 禁止不必要的 .call() 和 .apply()
"no-useless-call": 2,
// 禁止不必要的字元串字面量或模闆字面量的連接配接
"no-useless-concat": 2,
// 禁用不必要的轉義字元
"no-useless-escape": 0,
// 禁用 void 操作符
"no-void": 0,
// 禁止在注釋中使用特定的警告術語
"no-warning-comments": 0,
// 禁用 with 語句
"no-with": 2,
// 強制在parseInt()使用基數參數
radix: 2,
// 要求所有的 var 聲明出現在它們所在的作用域頂部
"vars-on-top": 0,
// 要求 IIFE 使用括号括起來
"wrap-iife": [2, "any"],
// 要求或禁止 “Yoda” 條件
yoda: [2, "never"],
// 要求或禁止使用嚴格模式指令
strict: 0,
//
// 變量聲明 //
//
// 要求或禁止 var 聲明中的初始化(初值)
"init-declarations": 0,
// 不允許 catch 子句的參數與外層作用域中的變量同名
"no-catch-shadow": 0,
// 禁止删除變量
"no-delete-var": 2,
// 不允許标簽與變量同名
"no-label-var": 2,
// 禁用特定的全局變量
"no-restricted-globals": 0,
// 禁止 var 聲明 與外層作用域的變量同名
"no-shadow": 0,
// 禁止覆寫受限制的辨別符
"no-shadow-restricted-names": 2,
// 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到
"no-undef": 2,
// 禁止将變量初始化為 undefined
"no-undef-init": 2,
// 禁止将 undefined 作為辨別符
"no-undefined": 0,
// 禁止出現未使用過的變量
"no-unused-vars": [
2,
{
vars: "all",
args: "none"
}
],
// 不允許在變量定義之前使用它們
"no-use-before-define": 0,
//
// Node.js and CommonJS //
//
// require return statements after callbacks
"callback-return": 0,
// 要求 require() 出現在頂層子產品作用域中
"global-require": 1,
// 要求回調函數中有容錯處理
"handle-callback-err": [2, "^(err|error)$"],
// 禁止混合正常 var 聲明和 require 調用
"no-mixed-requires": 0,
// 禁止調用 require 時使用 new 操作符
"no-new-require": 2,
// 禁止對 __dirname 和 __filename進行字元串連接配接
"no-path-concat": 0,
// 禁用 process.env
"no-process-env": 0,
// 禁用 process.exit()
"no-process-exit": 0,
// 禁用同步方法
"no-sync": 0,
//
// 風格指南 //
//
// 指定數組的元素之間要以空格隔開(, 後面)， never參數：[ 之前和 ] 之後不能帶空格，always參數：[ 之前和 ] 之後必須帶空格
"array-bracket-spacing": [2, "never"],
// 禁止或強制在單行代碼塊中使用空格(禁用)
"block-spacing": [1, "never"],
//強制使用一緻的縮進 第二個參數為 "tab" 時，會使用tab，
// if while function 後面的{必須與if在同一行，java風格。
"brace-style": [
2,
"1tbs",
{
allowSingleLine: true
}
],
// 雙峰駝命名格式
camelcase: 2,
// 控制逗号前後的空格
"comma-spacing": [
2,
{
before: false,
after: true
}
],
// 控制逗号在行尾出現還是在行首出現 (預設行尾)
// http://eslint.org/docs/rules/comma-style
"comma-style": [2, "last"],
//"SwitchCase" (預設：0) 強制 switch 語句中的 case 子句的縮進水準
// 以方括号取對象屬性時，[ 後面和 ] 前面是否需要空格, 可選參數 never, always
"computed-property-spacing": [2, "never"],
// 用于指統一在回調函數中指向this的變量名，箭頭函數中的this已經可以指向外層調用者，應該沒卵用了
// e.g [0,"that"] 指定隻能 var that = this. that不能指向其他任何值，this也不能指派給that以外的其他值
"consistent-this": [1, "that"],
// 強制使用命名的 function 表達式
"func-names": 0,
// 檔案末尾強制換行
"eol-last": 2,
indent: [
2,
4,
{
SwitchCase: 1
}
],
// 強制在對象字面量的屬性中鍵和值之間使用一緻的間距
"key-spacing": [
2,
{
beforeColon: false,
afterColon: true
}
],
// 強制使用一緻的換行風格
"linebreak-style": [1, "unix"],
// 要求在注釋周圍有空行 ( 要求在塊級注釋之前有一空行)
"lines-around-comment": [
1,
{
beforeBlockComment: true
}
],
// 強制一緻地使用函數聲明或函數表達式，方法定義風格，參數：
// declaration: 強制使用方法聲明的方式，function f(){} e.g [2, "declaration"]
// expression：強制使用方法表達式的方式，var f = function() {} e.g [2, "expression"]
// allowArrowFunctions: declaration風格中允許箭頭函數。 e.g [2, "declaration", { "allowArrowFunctions": true }]
"func-style": 0,
// 強制回調函數最大嵌套深度 5層
"max-nested-callbacks": [1, 5],
// 禁止使用指定的辨別符
"id-blacklist": 0,
// 強制辨別符的最新和最大長度
"id-length": 0,
// 要求辨別符比對一個指定的正規表達式
"id-match": 0,
// 強制在 JSX 屬性中一緻地使用雙引号或單引号
"jsx-quotes": 0,
// 強制在關鍵字前後使用一緻的空格 (前後腰需要)
"keyword-spacing": 2,
// 強制一行的最大長度
"max-len": [1, 200],
// 強制最大行數
"max-lines": 0,
// 強制 function 定義中最多允許的參數數量
"max-params": [1, 7],
// 強制 function 塊最多允許的的語句數量
"max-statements": [1, 200],
// 強制每一行中所允許的最大語句數量
"max-statements-per-line": 0,
// 要求構造函數首字母大寫 （要求調用 new 操作符時有首字母大小的函數，允許調用首字母大寫的函數時沒有 new 操作符。）
"new-cap": [
2,
{
newIsCap: true,
capIsNew: false
}
],
// 要求調用無參構造函數時有圓括号
"new-parens": 2,
// 要求或禁止 var 聲明語句後有一行空行
"newline-after-var": 0,
// 禁止使用 Array 構造函數
"no-array-constructor": 2,
// 禁用按位運算符
"no-bitwise": 0,
// 要求 return 語句之前有一空行
"newline-before-return": 0,
// 要求方法鍊中每個調用都有一個換行符
"newline-per-chained-call": 1,
// 禁用 continue 語句
"no-continue": 0,
// 禁止在代碼行後使用内聯注釋
"no-inline-comments": 0,
// 禁止 if 作為唯一的語句出現在 else 語句中
"no-lonely-if": 0,
// 禁止混合使用不同的操作符
"no-mixed-operators": 0,
// 不允許空格和 tab 混合縮進
"no-mixed-spaces-and-tabs": 2,
// 不允許多個空行
"no-multiple-empty-lines": [
2,
{
max: 2
}
],
// 不允許否定的表達式
"no-negated-condition": 0,
// 不允許使用嵌套的三元表達式
"no-nested-ternary": 0,
// 禁止使用 Object 的構造函數
"no-new-object": 2,
// 禁止使用一進制操作符 ++ 和 --
"no-plusplus": 0,
// 禁止使用特定的文法
"no-restricted-syntax": 0,
// 禁止 function 辨別符和括号之間出現空格
"no-spaced-func": 2,
// 不允許使用三元操作符
"no-ternary": 0,
// 禁用行尾空格
"no-trailing-spaces": 2,
// 禁止辨別符中有懸空下劃線_bar
"no-underscore-dangle": 0,
// 禁止可以在有更簡單的可替代的表達式時使用三元操作符
"no-unneeded-ternary": 2,
// 禁止屬性前有空白
"no-whitespace-before-property": 0,
// 強制花括号内換行符的一緻性
"object-curly-newline": [
"error",
{
ObjectExpression: {
multiline: true
}, // 對象字面量的配置。
ObjectPattern: {
//對象的解構指派模式的配置
multiline: true
},
ImportDeclaration: {
multiline: true
}, //配置命名的導入
ExportDeclaration: {
//配置命名的導出
multiline: true
// "minProperties": 3
}
}
],
// 強制在花括号中使用一緻的空格
"object-curly-spacing": 0,
// 強制将對象的屬性放在不同的行上
"object-property-newline": 0,
// 強制函數中的變量要麼一起聲明要麼分開聲明
"one-var": [
2,
{
initialized: "never"
}
],
// 要求或禁止在 var 聲明周圍換行
"one-var-declaration-per-line": 0,
// 要求或禁止在可能的情況下要求使用簡化的指派操作符
"operator-assignment": 0,
// 強制操作符使用一緻的換行符
"operator-linebreak": [
0,
"after",
{
overrides: {
"?": "before",
":": "before"
}
}
],
// 要求或禁止塊内填充
"padded-blocks": 0,
// 要求對象字面量屬性名稱用引号括起來
"quote-props": 0,
// 強制使用一緻的反勾号、雙引号或單引号
quotes: [2, "single", "avoid-escape"],
// 要求使用 JSDoc 注釋
"require-jsdoc": 1,
// 要求或禁止使用分号而不是 ASI（這個才是控制行尾部分号的，）
semi: [2, "always"],
// 強制分号之前和之後使用一緻的空格
"semi-spacing": 0,
// 要求同一個聲明塊中的變量按順序排列
"sort-vars": 0,
// 強制在塊之前使用一緻的空格
"space-before-blocks": [2, "always"],
// 強制在 function的左括号之前使用一緻的空格
"space-before-function-paren": [2, "always"],
// 強制在圓括号内使用一緻的空格
"space-in-parens": [2, "never"],
// 要求操作符周圍有空格
"space-infix-ops": 2,
// 強制在一進制操作符前後使用一緻的空格
"space-unary-ops": [
2,
{
words: true,
nonwords: false
}
],
// 強制在注釋中 // 或 /* 使用一緻的空格
"spaced-comment": [
2,
"always",
{
markers: [
"global",
"globals",
"eslint",
"eslint-disable",
"*package",
"!"
]
}
],
// 要求或禁止 Unicode BOM
"unicode-bom": 0,
// 要求正規表達式被括号括起來
"wrap-regex": 0,
//
// ES6.相關 //
//
// 要求箭頭函數體使用大括号
"arrow-body-style": 2,
// 要求箭頭函數的參數使用圓括号
"arrow-parens": 2,
"arrow-spacing": [
2,
{
before: true,
after: true
}
],
// 強制在子類構造函數中用super()調用父類構造函數，TypeScrip的編譯器也會提示
"constructor-super": 0,
// 強制 generator 函數中 * 号周圍使用一緻的空格
"generator-star-spacing": [
2,
{
before: true,
after: true
}
],
// 禁止修改類聲明的變量
"no-class-assign": 2,
// 不允許箭頭功能，在那裡他們可以混淆的比較
"no-confusing-arrow": 0,
// 禁止修改 const 聲明的變量
"no-const-assign": 2,
// 禁止類成員中出現重複的名稱
"no-dupe-class-members": 2,
// 不允許複制子產品的進口
"no-duplicate-imports": 0,
// 禁止 Symbol 的構造函數
"no-new-symbol": 2,
// 允許指定子產品加載時的進口
"no-restricted-imports": 0,
// 禁止在構造函數中，在調用 super() 之前使用 this 或 super
"no-this-before-super": 2,
// 禁止不必要的計算性能鍵對象的文字
"no-useless-computed-key": 0,
// 要求使用 let 或 const 而不是 var
"no-var": 0,
// 要求或禁止對象字面量中方法和屬性使用簡寫文法
"object-shorthand": 0,
// 要求使用箭頭函數作為回調
"prefer-arrow-callback": 0,
// 要求使用 const 聲明那些聲明後不再被修改的變量
"prefer-const": 0,
// 要求在合适的地方使用 Reflect 方法
"prefer-reflect": 0,
// 要求使用擴充運算符而非 .apply()
"prefer-spread": 0,
// 要求使用模闆字面量而非字元串連接配接
"prefer-template": 0,
// Suggest using the rest parameters instead of arguments
"prefer-rest-params": 0,
// 要求generator 函數内有 yield
"require-yield": 0,
// enforce spacing between rest and spread operators and their expressions
"rest-spread-spacing": 0,
// 強制子產品内的 import 排序
"sort-imports": 0,
// 要求或禁止模闆字元串中的嵌入表達式周圍空格的使用
"template-curly-spacing": 1,
// 強制在 yield* 表達式中 * 周圍使用空格
"yield-star-spacing": 2,
parser: "vue-eslint-parser"
}
};
對于配置的修改，可以到官網查找相應項去修改或者添加
位址：https://eslint.bootcss.com/docs/rules/
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)