React-native ESLint & Prettier & Pre-commit Hook配置
目錄javascript
前言
- 目標：
實如今git commit之時，從新格式化代碼，同時進行代碼檢查預防一些低級錯誤 - 實現過程
-> 待提交的代碼 -> git add 添加到暫存區 -> 執行 git commit -> husky註冊在git pre-commit的鉤子調起 lint-staged -> lint-staged 取得全部被提交的文件依次執行寫好的任務（ESLint 和 Prettier） -> 若是有錯誤（沒經過ESlint檢查）則中止任務，等待下次commit，同時打印錯誤信息 -> 成功提交
一 eslint
ESLint 是一個按照規則給出報告的代碼檢測工具，使用它能夠避免低級錯誤和統一代碼風格，這對公司團隊開發很是實用。html
1.1. 局部安裝eslint
npm install --save-dev eslint // 若是項目使用了 React 須要再安一個 babel-eslint npm install --save-dev eslint babel-eslint
注
ESLint 也能夠全局安裝，全局安裝後能夠方便用 ESLint 直接執行。java
1.2 初始化配置文件
ESLint 初始化能夠幫助開發者快速生成一個基本的配置框架。node
在項目文件夾下執行react
./node_modules/.bin/eslint --init
1.3 安裝步驟
以後會出現讓選項界面,經過上下按鍵去選擇.
筆者建議:webpack
ESLint 風格選 Use a popular style guide 遵循哪一個標準選 Airbnb 配置文件格式選 JSON 或 JavaScript 是否支持 React 選 y
1.3.1 ESLint 風格 選Use a popular style guide
這裏會給咱們三種方式來初始化ESlint
分別是 1. 使用大廠的 2. 問問題 3. 檢查現有的代碼自動生成
這裏直接選第一個
git
1.3.2 遵循哪一個標準 選Airbnb
1.3.3 是否支持 React 選 y
1.3.4 配置文件格式 選JSON 或 JavaScript
1.3.5 提示安裝依賴的庫 選 y
1.3.6 pakage.json文件會新增
1.4 .eslintrc.js配置文件
在項目根目錄生成一個名爲 .eslintrc.js 的配置文件。es6
1.4.1 extends
extends：ESLint 不須要自行定義大量的規則，由於不少規則已被分組做爲一個規則配置。github
1.4.1 plugins 規則配置
plugins：顧名思義就是插件，插件是單獨的npm包，命名通常以eslint-plugin開頭，寫的時候用字符串數組的形式，能夠省略eslint-plugin開頭。plugins通常包含一個或多個規則配置，能夠在extends中引入。web
例如：
eslint:recommended就是 ESLint 的推薦規則配置，包含了ESLint的規則 裏前面有✔︎的部分，recommended 規則只在ESLint升級大版本的纔有可能改變。
相對的 eslint:all 是應用全部的規則，但並不推薦這麼作。另外，all 規則是根據版本隨時變化的。
extends 還能夠以字符串數組的形式定義。
"extends": [ "eslint:recommended", "plugin:react/recommended" ],
1.4.3 指定執行環境env
env: Environments，指定代碼的運行環境。不一樣的運行環境，全局變量不同，指明運行環境這樣ESLint就能識別特定的全局變量。同時也會開啓對應環境的語法支持，例如：es6。
"env": {
"jest": true
},
1.4.4 指定全局變量
globals：全局變量，若是你的項目用到其餘一些自定義的全局變量，"DEV": false這樣配置，true
和 false 表明可不能夠被修改。
1.4.4.1 使用註釋來配置
/* global __DEV__, fetch */ /* global __DEV__:true, fetch:true */
1.4.4.2 使用配置文件來配置
"globals": {
"__DEV__": true,
"fetch": true
},
1.4.5 parser
parser：ESLint 默認使用Espree做爲其解析器，但它並不能很好的適應 React 環境，因此剛纔安裝了 babel-eslint 用來代替默認的解析器，在配置裏這麼寫"parser": "babel-eslint"。
1.4.6 規則rules
rules：這裏能夠對規則進行細緻的定義了，覆蓋以前前面說的extends中定義的規則。
例如:
indent就是對縮進的修改。"indent": ["error",4] 前面一項表明錯誤等級，第二項是具體配置，有些規則有第三項選項，例如 indent 就有 { "SwitchCase": 1 }，表明對switch語句採起什麼樣的縮進策略，若是不設默認是0。具體能夠定義什麼 rules，能夠參考這裏
規則等級有三種：
- 「off」或者0： 關閉規則
- 「warn」或者1： 打開規則，做爲警告。
- 「error」或者2： 打開規則，做爲錯誤
1.4.6.1 使用註釋來配置
/* eslint no-console: "off", no-undef: "error" */ /* eslint no-console: 0, no-undef: 2 */
1.4.6.2 使用配置文件來配置
"rules": {
"no-console": "off",
"no-undef": "off",
"no-useless-constructor": "off",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true,
"optionalDependencies": false,
"peerDependencies": false
}
],
"react/jsx-filename-extension": "off"
}
1.4.6.3 在註釋中關閉規則
/* eslint-disable */ /* eslint-enable */ /* eslint-disable no-alert, no-console */ /* eslint-enable no-alert, no-console */
1.4.7 其餘可用的配置參考這個
1.4.8 React Native 項目的配置例子
module.exports = {
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
],
"globals": {
"__DEV__": true,
"fetch": true
},
"parser": "babel-eslint",
"rules": {
"arrow-body-style": [
2,
"as-needed"
],
"arrow-parens": [
"error",
"always"
],
"allow-single-line": true,
"block-spacing": 2,
"class-methods-use-this": 0,
"comma-dangle": [
2,
"always-multiline"
],
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 0,
"import/prefer-default-export": 0,
"import/no-webpack-loader-syntax": 0,
"indent": [
"error",
2,
{
"SwitchCase": 1
}
],
"jsx-a11y/aria-props": 2,
"jsx-a11y/heading-has-content": 0,
"jsx-a11y/href-no-hash": 0,
"jsx-a11y/label-has-for": 2,
"jsx-a11y/mouse-events-have-key-events": 2,
"jsx-a11y/role-has-required-aria-props": 2,
"jsx-a11y/role-supports-aria-props": 2,
"jsx-a11y/no-static-element-interactions": 0,
"lines-between-class-members": 0,
"max-len": 0,
"newline-per-chained-call": 1,
"no-alert": 0,
"no-confusing-arrow": 0,
"no-console": 1,
"no-unused-vars": 2,
"no-use-before-define": 0,
"prefer-template": 2,
"react/forbid-prop-types": 0,
"react/jsx-first-prop-new-line": [
2,
"multiline"
],
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/jsx-no-target-blank": 0,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/require-extension": 0,
"react/self-closing-comp": 0,
"react/jsx-one-expression-per-line": 0,
"semi": [
2,
"always"
]
}
};
1.5 使用方法
在package.json文件中加入如下代碼
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"lint": "eslint --ext .js ./src --fix"
}
命令行工具, 在根目錄下執行npm run lint, 即會檢測代碼
npm run lint
二 prettier
Prettier是代碼格式化工具，可以統一我的或者團隊的代碼風格。相對於 ESlint 代碼檢查能力較弱。
2.1 安裝
npm i --save-dev --save-exact prettier
2.2 配置.prettierrc.js
在工程根目錄下建立.prettierrc.js文件，
module.exports = {
printWidth: 120, // 換行字符串閾值
semi: true, // 句末加分號
singleQuote: true, // 用單引號
trailingComma: 'none', // 最後一個對象元素加逗號
bracketSpacing: true, // 對象，數組加空格
jsxBracketSameLine: false, // jsx > 是否另起一行
arrowParens: 'avoid', // (x) => {} 是否要有小括號
requirePragma: false, // 是否要註釋來決定是否格式化代碼
proseWrap: 'preserve' // 是否要換行
};
2.3 插件
npm i -D eslint eslint-config-prettier eslint-plugin-prettier
2.4 結合.eslintrc.json配置
"extends": [ "airbnb", "prettier", "plugin:prettier/recommended" ], "plugins": [ "react", "prettier" ],
2.5 使用方法
在package.json文件中加入如下代碼
"scripts": {
"prettier": "prettier --write src/**/*.js"
}
在命令行工具下執行
prettier --write src/**/*.js
src對應的是你文件夾
三 Pre-commit Hook
Pre-commit Hook是在Git提交以前用來檢查待提交代碼是否有錯誤的工具。
2.1 安裝
npm i -D husky lint-staged pretty-quick
2.2 配置
在package.json中添加 hook 函數
"scripts": {
...
"precommit": "pretty-quick --staged" // git commit 執行這個命令，這個命令在調起 lint-staged
// "precommit": "lint-staged"
},
"lint-staged": { // lint-staged 配置
"app/**/*.{js,jsx}": [
"prettier --write",
"eslint --fix",
"git add"
]
}
這裏 lint-staged 的配置是：在 git 的待提交的文件中，在 app 目錄下的全部 .js .jsx 都要執行三條命令。
- 第一條命令 prettier --write
--tab-width 4：使用4個空格做爲縮進
若是想用tab做爲縮進能夠加上--use-tabs， 這時--tab-width表明tab數量。--write：默認prettier是直接標準輸出到終端的，這個配置表明直接改寫文件。- 關於prettier的還有一些配置參考這裏prettier文檔
- 第二條命令， 自動修復一些格式上的問題
第三條命令， 將處理過的代碼從新 add 到 git 中。
注：
粘貼的時候記得刪掉註釋，咱們知道JSON是沒有註釋的
3.3 使用
使用Git提交代碼的時候，會自動檢測代碼並進行格式化，如何有錯誤會終止push
- 1. 使用React JS, ESLint, Prettier和git precommit hooks管理前端代碼
- 2. react配置eslint+airbnb+Prettier
- 3. vscode-settings.json配置（prettier + eslint）
- 4. webstorm中配置eslint+prettier
- 5. eslint + prettier
- 6. 項目中 Prettier + Stylelint + ESlint 配置
- 7. eslint + vue + prettier 咋配的？
- 8. vscode 中 eslint prettier 和 eslint -loader 配置關係
- 9. Prettier
- 10. 認識 ESLint 和 Prettier
- 更多相關文章...
- • Eclipse Debug 配置 - Eclipse 教程
- • Maven 環境配置 - Maven教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 使用React JS, ESLint, Prettier和git precommit hooks管理前端代碼
- 2. react配置eslint+airbnb+Prettier
- 3. vscode-settings.json配置（prettier + eslint）
- 4. webstorm中配置eslint+prettier
- 5. eslint + prettier
- 6. 項目中 Prettier + Stylelint + ESlint 配置
- 7. eslint + vue + prettier 咋配的？
- 8. vscode 中 eslint prettier 和 eslint -loader 配置關係
- 9. Prettier
- 10. 認識 ESLint 和 Prettier