eslint學習
配置文件：.eslintrc.js
常見配置字段
module.exports = { 'parser':'esprima', 'env': { 'browser': true, 'es6': true, }, 'extends': [ 'airbnb', ], 'globals': { 'Atomics': 'readonly', 'SharedArrayBuffer': 'readonly', }, 'parserOptions': { 'ecmaVersion': 2018, 'sourceType': 'module', 'ecmaFeatures': { 'jsx': true } }, 'rules': { 'semi': 'error' }, };
配置字段解析
extends:[]
配置文件可以從基本配置擴展啟用的規則集，不添加則不會繼承任何擴展集，僅按照rules下的基本配置來執行。
可以擴展的規則常見的有：
airbnb（世界第一）
安裝依賴包
npm install eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import eslint-config-airbnb --save
{ "extends": "airbnb" }
規則特點
不去掉分號
自動把import引入的包放在了最上面
不希望有console，有會報警告
if語句如果沒有包大括號不會加大括號，會從兩行轉為一行
多個import后面加一個空行
字符串使用單引號
縮進為2個空格
未定義的變量會報錯
箭頭函數前后需要空格
未使用的變量會報錯
standard（世界第二）
安裝依賴包
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
{ "extends": "standard" }
規則特點
去掉分號
if語句會自動加大括號，兩行轉為一行
縮進2個空格
字符串使用單引號
自動把import引入的包放在了最上面
多個Import之間有空行，最后一個import之后不會有空行
未定義的變量會報錯
箭頭函數前后需要空格
未使用的變量會報錯
alloy（世界第三）
AlloyTeam ESLint 規則不僅是一套先進的適用於 React/Vue/Typescript 項目的 ESLint 配置規范，而且也是你配置個性化 ESLint 規則的最佳參考。騰訊開源eslint規則，目前主要是對代碼規則的校驗，不包含格式校驗。
npm install --save-dev eslint babel-eslint eslint-config-alloy module.exports = { extends: [ 'alloy', ], env: { // Your environments (which contains several predefined global variables) // // browser: true, // node: true, // mocha: true, // jest: true, // jquery: true }, globals: { // Your global variables (setting to false means it's not allowed to be reassigned) // // myGlobal: false }, rules: { // Customize your rules }, };
安裝依賴包
npm install --save-dev eslint-config-google
規則特點
不去掉分號
字符串使用單引號
相對上面兩個力度較小，import沒有自動提到最上面，
未定義的變量不會報錯
縮進為2個空格
箭頭函數前后沒有空格要求
未使用的變量會報錯
eslint:recommended
粒度比較小，依然支持雙引號，也沒有空格，僅報錯了未定義的變量和未使用的變量
eslint:all
粒度相當大，各種空行，console.log里都是換行，if語句里面都是空行，import不會提到前面
plugin:prettier/recommended
即prettier規則。
使用此規則的方式見下面 ：eslint+prettier配合配置
大概看出的幾個共同點
都會把沒有改變過的變量從let定義改為const定義
字符串都轉為單引號
該有的空格都有
未使用的變量會報錯
嚴格程度排名
airbnb>standard>alloy>google
plugins:[]
ESLint支持使用第三方插件。在使用插件之前，您必須使用npm安裝它。
插件：
eslint-plugin-html
一個ESLint插件，用於整理和修復HTML文件中包含的內聯script腳本,支持多個script標簽,此行為不適用於“模塊”腳本（即：<script type="module">)。
https://www.npmjs.com/package/eslint-plugin-html
配置方式：
在 .eslintrc.js中的plugin中加入html
{ "plugins": [ "html" ] }
rules:[]
配合代碼規則：
"off"或0-關閉規則"warn"或1-將該規則作為警告打開（不影響退出代碼）"error"或2-將規則作為錯誤打開（觸發時退出代碼為1）
parserOptions:{}
解析器選項，主要用於解析JavaScript的語言選項
ecmaVersion：JavaScript版本
sourceType：script還是module
eslint常用幾個命令
eslint --init **/*.js 初始化創建默認eslint配置
eslint --fix **/*.js 修復問題
注意：使用項目中的eslint，命令為 npx eslint --fix **/*.js
webpack eslint配置
{ test: /\.js$/, use: [ { loader: "babel-loader", }, { loader: "eslint-loader",// 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine options: { fix: true,// 保存自動格式化開啟 formatter: require('eslint-friendly-formatter') // 指定錯誤報告的格式規范 } }, ], enforce: "pre", include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄 },
prettier學習
作用
prettier 主要是為了格式化代碼，而在沒有 prettier 之前，是用 eslint —fix和 編輯器自帶代碼格式來進行代碼格式化的。
- 缺點：每種編輯器會有不一樣的代碼格式，而且配置會比較麻煩。
- prettier 已經逐漸成為業界主流的代碼風格格式化工具。
- 減輕 eslint 等工具的校驗規則，因為將代碼樣式校驗交給了 prettier，所以可以將代碼校驗的規則更准確地應用到代碼真正的規范上面。
安裝
First, install Prettier locally:
prettier需要精確安裝，
npm install --save-dev --save-exact prettier
Then, create an empty config file to let editors and other tooling know you are using Prettier:
echo {}> .prettierrc.json
Next, create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:
# Ignore artifacts:
build
coverage
命令
prettier --check **/*.js
prettier --write **/*.js
注意：使用項目中的eslint，命令為 npx prettier --write **/*.js
eslint+prettier配合配置
eslint 是主要還是負責代碼規則校驗，prettier 只調整代碼風格，代碼樣式，eslint 才是真正檢查代碼是否符合規范的工具。兩者分工不同，所以需要配合使用。
了解配合配置的方式，先來了解幾個npm包
插件：
eslint-plugin-prettier
作用：一個形式上跟standard類似的一個代碼規則，用來在基礎規則上擴展的規則，eslint的rules規則優先級大於prettier的規則。
提示：eslint-plugin-prettier不會為您安裝Prettier或ESLint，你必須自己安裝。
使用prettier的擴展規則有兩種方式：
注意：不需要寫extends:"prettier"，光下面的配置即可
方式一：
{ "plugins": ["prettier"], "rules": { "prettier/prettier": "error" // "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}] 這里的配置會覆蓋.prettierrc.js的配置 // "prettier/prettier": ["error", {}, { // "usePrettierrc": true // }] // 開啟這個配置，可以指定使用.prettierrc.js配置，不會和其他配置沖突 } }
方式二：
extends: [ 'plugin:prettier/recommended', ],
兩種區別：
方式一：兩種規則會有沖突
方式二：兩種規則沒有沖突，會自動去掉eslint沖突的規則，配置簡單。
重點：
如果使用方式二，需配合 eslint-config-prettier
作用：禁用與lint相關的所有格式化規則。
注意：
由於編輯器等自動格式化配置設置了走.prettierrc.js文件，建議寫覆蓋的配置，寫在這里，不要寫在.eslintrc.js配置中，否則可能得不到想要的結果。
安裝插件：
注意：為了避免不同人安裝的的prettier版本不同導致的代碼格式化規則不同，建議安裝prettier使用精確版本安裝。
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
規則沖突示例：
可以看到同一行的同樣的錯誤會拋出兩個版本的錯誤信息
3:19 error Replace `"axios"` with `'axios';` prettier/prettier // prettier拋出 3:19 error Strings must use singlequote quotes // esLint拋出
使用方式二后，prettier的規則會覆蓋掉standard相同的規則
最終配置
樣式格式校驗
stylelint
npm install stylelint --save-dev
npm install --save-dev stylelint-config-prettier
Then, append stylelint-config-prettier to the extends array in your .stylelintrc.* file. Make sure to put it last, so it will override other configs.
{ "extends": [ // other configs ... "stylelint-config-prettier" ] }
所有樣式問題都會暴露
npm install stylelint-config-recommended --save-dev
stylelint-config-standard是stylelint的推薦配置
stylelint-order是 css 屬性排序插件
npm install stylelint-config-standard --save-dev
npm install stylelint-order --save-dev { "plugins": [ "stylelint-order" ], "rules": { "order/order": [ "custom-properties", "declarations" ], "order/properties-order": [ "width", "height" ] } }
代碼檢查
npx stylelint "**/*.css"
.eslintrc.js
module.exports = { extends: [ 'alloy', 'plugin:prettier/recommended', ], parserOptions: { parser: 'babel-eslint', sourceType: 'module', }, // parser: '@typescript-eslint/parser', // plugins: ['@typescript-eslint'], rules: { // "prettier/prettier": "error", }, env: { browser: true, node: true, jest: true, es2017: true, }, // plugins: ['html', 'prettier'], plugins: ['html'], }
.prettierrc.js
module.exports = { // 一行最多 80 字符 printWidth: 80, // 使用 4 個空格縮進 tabWidth: 4, // 不使用縮進符，而使用空格 useTabs: false, // 行尾需要有分號 semi: false, // 使用單引號 singleQuote: true, // 對象的 key 僅在必要時用引號 quoteProps: 'as-needed', // jsx 不使用單引號，而使用雙引號 jsxSingleQuote: false, // 末尾不需要逗號 trailingComma: 'none', // 大括號內的首尾需要空格 bracketSpacing: true, // jsx 標簽的反尖括號需要換行 jsxBracketSameLine: false, // 箭頭函數，只有一個參數的時候，也需要括號 arrowParens: 'always', // 每個文件格式化的范圍是文件的全部內容 rangeStart: 0, rangeEnd: Infinity, // 不需要寫文件開頭的 @prettier requirePragma: false, // 不需要自動在文件開頭插入 @prettier insertPragma: false, // 使用默認的折行標准 proseWrap: 'preserve', // 根據顯示樣式決定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 換行符使用 lf endOfLine: 'lf' };
.stylelintrc.js
module.exports = { extends: [ 'stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-config-sass-guidelines', ], plugins: [ 'stylelint-order', 'stylelint-scss' ], rules: { "order/order": [ "custom-properties", "declarations" ], "order/properties-order": [ "width", "height" ] } };
如果不用scss，建議直接這樣配置：
scss的一些規則會和常規使用的規則不太一樣。
module.exports = { extends: ['stylelint-config-standard'], // "plugins": [ // // "stylelint-csstree-validator" // ], rules: { 'color-named': ['never',{ignoreProperties: ['background','color']}], // never 強制使用十六進制，always-where-possible 強制使用單詞命名 // "csstree/validator": true, // 檢查屬性值和屬性名是否正確 'string-quotes':'double', // double 雙引號，single，單引號 // 'block-opening-brace-newline-after':'always-multi-line' // 大括號后是否另一一行 } }
參考鏈接
https://juejin.im/post/6844903621805473800
https://juejin.im/post/6844903843541549063
https://segmentfault.com/a/1190000022881634 【好文推薦】https://juejin.im/post/6844903832485363720【好文推薦】
https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md