eslint / prettier 檢查格式配置

eslint 和 prettier 區別

eslint（包括其他一些 lint 工具）的主要功能包含代碼格式的校驗，代碼質量的校驗。而 Prettier 只是代碼格式的校驗（并格式化代碼），不會對代碼質量進行校驗。代碼格式問題通常指的是：單行代碼長度、tab長度、空格、逗號表達式等問題。而代碼質量問題指的是：未使用變量、三等號、全局變量聲明等問題。

對 Prettier（或 Eslint） 進行配置：

• 根目錄創建 .prettierrc.js / .eslintrc.js 文件，能夠寫入 YML、JSON 的配置格式，并且支持 .yaml/.yml/.json/.js 后綴；
• 在 package.json 中新建 prettier / eslintConfig 屬性。

一些規則的配置

'off': 表示關掉， 'wran': 表示發出警告 'error': 表示發出錯誤/*對應的數字是 */ 0：表示關掉 1：表示發出警告 2：表示發出錯誤"always": 總是開啟 "never": 從不開啟

vue 實例

安裝

yarn add -D @vue/cli-plugin-eslint babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier module.exports = {root: true,extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],parser: "vue-eslint-parser",parserOptions: {parser: "babel-eslint",sourceType: "module",allowImportExportEverywhere: true},env: {browser: true,node: true,es6: true},globals:{ // 全局變量"store":false,"Vue":true,"Vuex":true},plugins: ["prettier"],ignorePatterns: ["dist/**", ".gitignore"], // 忽略文件rules: {"prettier/prettier": [ // 內部配置 prettier1,{semi: false, // 格式化不加分號printWidth: 200, // 一行的字符數，如果超過會進行換行，默認為80singleQuote: false, // 字符串是否使用單引號，默認為false，使用雙引號trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"bracketSpacing: true, // 對象大括號直接是否有空格，默認為true，效果：{ foo: bar }jsxBracketSameLine: true // JSX 標簽閉合位置，默認false，換行閉合} // prettier 配置項],semi: [1, "never"]// 公共 rules 配置} };

react 實例

安裝

yarn add -D babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-config-react-app eslint-plugin-react-hooks eslint-plugin-react prettier

配置 autoFix

# 修復指定路徑文件 "fix": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore src/"# 修復所有文件 "fix": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore ." module.exports = {root: true,extends: ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],parserOptions: {parser: "babel-eslint",sourceType: "module",allowImportExportEverywhere: true},env: {browser: true,node: true,es6: true},plugins: ["prettier", "react-hooks"],rules: {"prettier/prettier": [1,{semi: false, // 格式化不加分號printWidth: 200, // 一行的字符數，如果超過會進行換行，默認為80singleQuote: false, // 字符串是否使用單引號，默認為false，使用雙引號trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"bracketSpacing: true, // 對象大括號直接是否有空格，默認為true，效果：{ foo: bar }jsxBracketSameLine: true, // JSX 標簽閉合位置，默認false，換行閉合}],"react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": "warn","react/jsx-tag-spacing": 1, // 總是在自動關閉的標簽前加一個空格，正常情況下也不需要換行"jsx-quotes": 1,"react/jsx-closing-bracket-location": 1, // 遵循JSX語法縮進/格式"react/jsx-boolean-value": 1, // 如果屬性值為 true, 可以直接省略"react/no-string-refs": 1, // 總是在Refs里使用回調函數"react/self-closing-comp": 1, // 對于沒有子元素的標簽來說總是自己關閉標簽"react/sort-comp": 1, // 按照具體規范的React.createClass 的生命周期函數書寫代碼"react/jsx-pascal-case": 1, // React模塊名使用帕斯卡命名，實例使用駱駝式命名"react/display-name": 1,semi: [2, "never"]} };

公共 rules 配置

完整 .eslintrc.js 規則

rules: {"no-useless-escape": 0, // 禁用不必要的轉義semi: [2, "never"], // 語句強制分號結尾quotes: [2, "double"], //建議使用單引號"no-inner-declarations": [0, "both"], //不建議在{}代碼塊內部聲明變量或函數"no-extra-boolean-cast": 0, // 多余的感嘆號轉布爾型"no-extra-semi": 2, // 多余的分號"no-extra-parens": 2, // 多余的括號"no-empty": 0, // 空代碼塊"no-use-before-define": [2, "nofunc"], // 使用前未定義complexity: [2, 20], // 圈復雜度大于20 警告"space-before-blocks": [0, "always"], // 不以新行開始的塊{前面要有2空格"space-before-function-paren": [0, "always"], // 函數定義時括號前面有2空格"spaced-comment": 0, // 注釋風格 2空格什么的"space-infix-ops": 2, // 中綴操作符周圍 有2空格"space-in-parens": [0, "never"], // 小括號里面要不要有空格radix: 0, // parseInt必須指定第二個參數"operator-linebreak": [0, "before"], // 換行時運算符在行尾還是行首，可選值"<after|before|none>"// "one-var-declaration-per-line": 2, // 單行聲明"max-len": [0, 200, 2], // 字符串最大長度"key-spacing": [2, { beforeColon: false, afterColon: true }], // 對象字面量中冒號的前后空格indent: [0, 2], // 縮進風格"no-multiple-empty-lines": [1, { max: 2 }], // 空行最多不能超過2行"no-multi-str": 2, // 字符串不能用\換行"no-mixed-spaces-and-tabs": [2, false], // 禁止混用tab和空格"no-console": 1, // 禁止使用console"no-const-assign": 2, // 禁止修改const聲明的變量//常見錯誤"comma-dangle": [2, "never"], // 定義數組或對象最后多余的逗號"no-debugger": 2, // debugger 調試代碼未刪除"no-constant-condition": 2, // 常量作為條件"no-dupe-args": 2, // 參數重復"no-dupe-keys": 2, // 對象屬性重復"no-duplicate-case": 2, // case重復"no-empty-character-class": 2, // 正則無法匹配任何值"no-invalid-regexp": 2, // 無效的正則"no-func-assign": 2, // 函數被賦值"valid-typeof": 2, // 無效的類型判斷"no-unreachable": 2, // 不可能執行到的代碼"no-unexpected-multiline": 2, // 行尾缺少分號可能導致一些意外情況"no-sparse-arrays": 2, // 數組中多出逗號"no-shadow-restricted-names": 2, // 關鍵詞與命名沖突"no-undef": 0, // 變量未定義"no-unused-vars": 0, // 變量定義后未使用 jsx 處理不了……"no-cond-assign": 2, // 條件語句中禁止賦值操作"no-native-reassign": 2, // 禁止覆蓋原生對象//代碼風格優化"no-else-return": 0, // 在else代碼塊中return，else是多余的"no-multi-spaces": 2, // 不允許多個空格"block-scoped-var": 0, // 變量定義后未使用"consistent-return": 0, // 函數返回值可能是不同類型"accessor-pairs": 2, // object gettertter方法需要成對出現"dot-location": [2, "property"], // 換行調用對象方法 點操作符應寫在行首"no-lone-blocks": 2, // 多余的{}嵌套"no-labels": 2, // 無用的標記"no-extend-native": 2, // 禁止擴展原生對象"no-floating-decimal": 2, // 浮點型需要寫全 禁止.2 或 2.寫法"no-loop-func": 2, // 禁止在循環體中定義函數"no-new-func": 2, // 禁止new Function(...) 寫法"no-self-compare": 2, // 不允與自己比較作為條件"no-sequences": 2, // 禁止可能導致結果不明確的逗號操作符"no-throw-literal": 2, // 禁止拋出一個直接量 應是Error對象"no-return-assign": [2, "always"], // 不允return時有賦值操作"no-redeclare": [0, { builtinGlobals: true }], // 不允許重復聲明"no-unused-expressions": [0, { allowShortCircuit: true, allowTernary: true }], // 未使用的表達式"no-useless-call": 2, // 無意義的函數call或apply"no-useless-concat": 2, // 無意義的string concat"no-void": 2, // 禁用void"no-with": 2, // 禁用with"no-warning-comments": [2, { terms: ["fixme", "any other term"], location: "anywhere" }], // 標記未寫注釋curly: [2, "all"] // if、else、while、for代碼塊用{}包圍}

完整 .prettierrc.js 規則

也可單獨在 .prettierrc.js 內配置

// .eslintrc.js ... rules: {"prettier/prettier": 2... } // .prettierrc.js module.exports = {semi: false, // 行位是否使用分號，默認為trueeslintIntegration: true, // 開啟 eslint 支持printWidth: 100, // 一行的字符數，如果超過會進行換行，默認為80tabWidth: 2, // 一個tab代表幾個空格數，默認為80useTabs: false, // 是否使用tab進行縮進，默認為false，表示用空格進行縮減singleQuote: false, // 字符串是否使用單引號，默認為false，使用雙引號trailingComma: "none", // 是否使用尾逗號，有三個可選值"<none|es5|all>"bracketSpacing: true, // 對象大括號直接是否有空格，默認為true，效果：{ foo: bar }jsxBracketSameLine: false, // JSX 標簽閉合位置，默認false，換行閉合arrowParens: "avoid", // 箭頭函數參數括號，默認avoid，能省略就省略，可選值"<avoid|always>"parser: "babel" // 代碼的解析引擎 }; {"prettier.printWidth": 100, // 超過最大值換行"prettier.tabWidth": 4, // 縮進字節數"prettier.useTabs": false, // 縮進不使用tab，使用空格"prettier.semi": true, // 句尾添加分號"prettier.singleQuote": true, // 使用單引號代替雙引號"prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行"prettier.arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號"prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }""prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置"prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto"prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗"prettier.htmlWhitespaceSensitivity": "ignore","prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行"prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號"prettier.parser": "babylon", // 格式化的解析器，默認是babylon"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier"prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗"prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號）"prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗 }

husky / lint-staged 強制校驗

husky 常用鉤子

pre-commit：由git commit命令觸發，在commit-msg之前；
commit-msg：git commit和git merge都會觸發，會傳遞一個參數，該參數為存放當前commit消息的臨時文件路徑；可以通過–no-verify參數來跳過commit-msg鉤子；
post-merge：觸發于merge完成后；

安裝

yarn add -D husky lint-staged

使用

// package.json"husky": {"hooks": {"pre-commit": "lint-staged --allow-empty"}},"lint-staged": {"*.{vue,ts,js}": ["eslint --fix"]},

在運行 git commit 時候，自動會先去運行 vue-cli-service lint 格式化代碼，再運行 git add 添加代碼。這兩步都通過后才會提交代碼。如果任何一步失敗，則會停止提交。

tslint 配置

"rules": {// TS特性"member-access": true, // 設置成員對象的訪問權限（public,private,protect)"member-ordering": [// 設置修飾符順序true,{"order": [ "public-static-field","public-static-method","protected-static-field","protected-static-method","private-static-field","private-static-method","public-instance-field","protected-instance-field","private-instance-field","public-constructor","protected-constructor","private-constructor","public-instance-method","protected-instance-method","private-instance-method"]}],"no-empty-interface":true,// 不允許空接口"no-parameter-reassignment":true,// 不允許修改方法輸入參數"prefer-for-of":true,// 如果for循環中沒有使用索引，建議是使用for-of// 功能特性"await-promise":true,// 不允許沒有Promise的情況下使用await"curly":true,// if/for/do/while強制使用大括號"forin":true,// 使用for in語句時，強制進行hasOwnProperty檢查"no-arg":true,// 不允許使用arguments.callee// "no-bitwise":true, // 不允許使用特殊運算符 &, &=, |, |=, ^, ^=, <<, <<=, >>, >>=, >>>, >>>=, ~"no-conditional-assignment":true,// do while/for/if/while 語句中將會對例如if(a=b)進行檢查// "no-console":true,// 不允許使用console對象"no-debugger":true,// 不允許使用debugger"no-duplicate-super":true,// 不允許super() 兩次使用在構造函數中"no-empty":true,// 函數體不允許空"no-eval":true,// 不允許使用eval"no-for-in-array":true,// 不允許對Array使用for-in"no-invalid-template-strings":true,// 只允許在模板字符串中使用${"no-invalid-this":true,// 不允許在class之外使用this"no-null-keyword":true,// 不允許使用null,使用undefined代替null，指代空指針對象"no-sparse-arrays":true,// 不允許array中有空元素"no-string-throw":true,// 不允許throw一個字符串"no-switch-case-fall-through":true,// 不允許case段落中在沒有使用breack的情況下，在新啟一段case邏輯"no-unsafe-finally":true,// 不允許在finally語句中使用return/continue/break/throw"no-unused-expression":true,// 不允許使用未使用的表達式"no-use-before-declare":true,// 在使用前必須聲明"no-var-keyword":true,// 不允許使用var"radix":true,// parseInt時，必須輸入radix精度參數"restrict-plus-operands":true,// 不允許自動類型轉換，如果已設置不允許使用關鍵字var該設置無效"triple-equals":true,// 必須使用恒等號，進行等于比較"use-isnan":true,// 只允許使用isNaN方法檢查數字是否有效// 維護性功能"indent":[true, "spaces", 4],// 每行開始以4個空格符開始"linebreak-style":[true,"CR/LF"],// 換行符格式 CR/LF可以通用使用在windows和osx"max-classes-per-file":[true,1],// 每個文件中可定義類的個數"max-file-line-count":[true,500],// 定義每個文件代碼行數"max-line-length":[true,120],// 定義每行代碼數"no-default-export":true,// 禁止使用export default關鍵字，因為當export對象名稱發生變化時，需要修改import中的對象名。https://github.com/palantir/tslint/issues/1182#issue-151780453"no-duplicate-imports":true,// 禁止在一個文件內，多次引用同一module// 格式"align":[true,"parameters","arguments","statements","members","elements"],// 定義對齊風格"array-type":[true,"array"],// 建議使用T[]方式聲明一個數組對象"class-name":true,// 類名以大駝峰格式命名"comment-format":[true, "check-space"],// 定義注釋格式"encoding":true,// 定義編碼格式默認utf-8"import-spacing":true,// import關鍵字后加空格"interface-name":[true,"always-prefix"],// interface必須以I開頭"jsdoc-format":true,// 注釋基于jsdoc風格"new-parens":true,// 調用構造函數時需要用括號"no-consecutive-blank-lines":[true,2],// 不允許有空行"no-trailing-whitespace": [// 不允許空格結尾true,"ignore-comments","ignore-jsdoc"],"no-unnecessary-initializer":true,// 不允許沒有必要的初始化"variable-name":[true,"check-format",// 定義變量命名規則"allow-leading-underscore","allow-trailing-underscore","ban-keywords"]} }

總結

以上是生活随笔為你收集整理的eslint / prettier 检查格式配置、husky / lint-staged 强制校验、tslint 配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。