eslint 查詢 https://eslint.org/
安裝
// 首先全局安裝 eslint
yarn global add eslint
簡單配置
// 使用AirBnb 規(guī)則
eslint --init
// 推薦選擇 javascript 文件類型 json文件的話 在里面寫注釋有點問題
如果要設(shè)置版本(airbnb)
eslint使用的時候 需要依賴eslint-config-airbnb、eslint-plugin-import、eslint-plugin-jsx-a11y劲藐、eslint-plugin-react
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
// 可以使用對應(yīng)版本
yarn add eslint-config-airbnb@16.1.0 --dev
自定義規(guī)則
eslintrc.js是對當(dāng)前工作區(qū)設(shè)置，不管在哪個工作項目
-
elintrc配置
配置項
extentds: 使用擴展規(guī)則叠赦，可以多個马靠，本文使用['airbnb']
env: 你的腳本將要運行在什么環(huán)境中 ``
rules: 開啟規(guī)則和發(fā)生錯誤時報告的級別 級別分為三種推薦使用[1,{}]定義
0或’off’：關(guān)閉規(guī)則篇梭。
1或’warn’：打開規(guī)則赏表，并且作為一個警告（并不會導(dǎo)致檢查不通過）检诗。
2或’error’：打開規(guī)則，并且作為一個錯誤 (退出碼為1瓢剿，檢查不通過)逢慌。
參數(shù)說明：
參數(shù)1 ： 錯誤等級
參數(shù)2 ： 處理方式
globals：定義全局變量 針對可能需要使用到 比如windows 這些可以配置
"window": true,
"document": true,
參考 寬松rules
"rules": {
"react/no-string-refs": [1],
"react/no-render-return-value": [1],
"jsx-a11y/no-noninteractive-element-interactions": [1],
"react/no-unused-prop-types": [1],
"no-case-declarations": [0],
"arrow-body-style": [0],
"generator-star-spacing": [0],
"global-require": [1],
"import/extensions": [0],
"import/no-extraneous-dependencies": [0],
"import/no-unresolved": [0],
"import/prefer-default-export": [0],
"jsx-a11y/no-static-element-interactions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"no-else-return": [0],
"no-nested-ternary": [0],
"no-restricted-syntax": [0],
"no-use-before-define": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, {
"extensions": [".js"]
}],
"react/jsx-no-bind": [0],
"react/prefer-stateless-function": [0],
"react/prop-types": [0],
"require-yield": [1],
"jsx-a11y/anchor-is-valid": [0],
"no-underscore-dangle": [0],
"object-curly-newline": [0],
"func-names": [0],
"react/no-array-index-key": [0],
"jsx-a11y/click-events-have-key-events": [0],
"no-plusplus": [0],
"linebreak-style": [
0,
"error",
"windows"
],
// 正確的使用const 在this.props解構(gòu)的時候, 為了簡便使用了let
"prefer-const": [0],
// 不允給參數(shù)重新賦值
"no-param-reassign": [0],
// 函數(shù)未被調(diào)用 對應(yīng)這種表達(dá)式cb && cb()會報錯
"no-unused-expressions": [0],
// 必須指定defaultProps, 但是對于很多組件,不傳props很也是一種狀態(tài)
"react/require-default-props": [0],
"jsx-a11y/label-has-for": [0],
// 多個操作符需要加括號, 明確指定先后順序
"no-mixed-operators": [0],
"react/no-find-dom-node": [0],
"max-len": [0],
// 箭頭函數(shù)不返回賦值語句
"no-return-assign": [0],
// tabIndex屬性不能加在 不是focusable元素上
"jsx-a11y/no-noninteractive-tab": [0],
"jsx-a11y/no-noninteractive-tabindex": [0],
// react class 函數(shù)書寫順序
"react/sort-comp": ["error", {
"order": [
"static-methods",
"lifecycle",
"/^handle.+$/",
"getters",
"setters",
"/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
"everything-else",
"/^render.+$/",
"render"
]
}]
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
嚴(yán)格rules
// 涉及到工作區(qū) 未能檢測到 忽略這個提醒
"import/no-extraneous-dependencies": [0],
// // 函數(shù)未被調(diào)用 對應(yīng)這種表達(dá)式cb && cb()會報錯
"no-unused-expressions": [2, { "allowShortCircuit": true }],
// 對于prop中使用bind提示
"react/jsx-no-bind": [
1,
{
'ignoreRefs': true,
'allowArrowFunctions': true
}
],
// 對proptypes 類型不限制
"react/forbid-prop-types": [0],
// 暫時忽略屬性類型檢查
"react/prop-types": [0],
"react/jsx-filename-extension": [1, {
"extensions": [".js"]
}],
// react class 函數(shù)書寫順序
"react/sort-comp": ["error", {
"order": [
"static-methods",
"lifecycle",
"/^handle.+$/",
"getters",
"setters",
"/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
"everything-else",
"/^render.+$/",
"render"
]
}]
-
vsCode配置
在vsCode配置中 加入以下設(shè)置可以保存的時候自動保存為符合eslint規(guī)則的代碼（不是全部規(guī)則）
"eslint.autoFixOnSave": true,
如果在windows環(huán)境中 換行符的話可以通過vs用戶配置修改成LF模式
擴展閱讀(https://juejin.im/entry/5c289c536fb9a049ff4e36e0)
- PropTypes （當(dāng)然可以 ts）
可以使用
vsCode插件React PropTypes Generate可以快速生成PropTypes
參考類型
