React項(xiàng)目配置prettier和eslint的方法
參考視頻: https://www.bilibili.com/video/BV1rh411e7E5?vd_source=eee62ea3954ac01bff9e87e2a7b40084
- prettier代碼格式化
- eslint js語法檢查
- stylellint css樣式檢查
配置prettier和eslint
1.初始化React項(xiàng)目
npx create-react-app study_react
2.安裝vscode插件 prettier和eslint, 配置vscode
3.安裝相關(guān)依賴
yarn add -D prettier eslint
在代碼格式化時(shí)采用Perttier規(guī)則，而我們代碼校驗(yàn)使用的是ESLint，如果同一個(gè)規(guī)則配置不一致，往往就會(huì)出現(xiàn)沖突問題；
比如：字符串單、雙引號(hào)的配置，eslint后把字符串變成單引號(hào)，更新文件代碼過后，重新保存（Prettier）又自動(dòng)格式化后變成雙引號(hào)，導(dǎo)致代碼校驗(yàn)異常。解決方案1： 兩者配置文件部分配置修改成一致.
eslint-config-prettier 禁用 eslint 沖突配置
解決方案2： 安裝相關(guān)插件（Prettier 和 ESLint 沖突解決方案 eslint-config-prettier eslint-plugin-prettier）
eslint-plugin-prettier Prettier先格式化 （默認(rèn)是先eslint格式化，再Prettier格式化）
yarn add -D eslint-config-prettier eslint-plugin-prettier
4.優(yōu)雅的提示錯(cuò)誤
“extends”: [“eslint:recommended”, “plugin:react/recommended”], 默認(rèn)是eslint:recommended，（步驟6后面會(huì)看到這個(gè)配置）
https://www.npmjs.com/package/eslint-config-airbnb
npx install-peerdeps --dev eslint-config-airbnb
5.初始化.eslintrc.json文件
npx eslint --init
如果全局安裝了eslint (
npm install -g eslint)了, 可以直接使用eslint --init
根據(jù)提示勾選:
安裝完成的eslintrc.json文件
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["error", "tab"],
"linebreak-style": ["error", "windows"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}6.修改eslintrc.json優(yōu)雅提示(也就是步驟4所提到)
"extends": ["airbnb", "prettier", "plugin:react/recommended"], "plugins": ["prettier", "react"],
7.新建.prettierrc文件
更多規(guī)則: https://www.prettier.cn/docs/options.html
{
"singleQuote": false,
"endOfLine": "lf"
}8.可自行定義eslintrc.json規(guī)則
9.效果
10.讓提示更細(xì)致
給
eslintrc.json追加rules,"prettier/prettier": "error",
最終的兩個(gè)文件的配置
// eslint
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb", "prettier", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["prettier", "react"],
"rules": {
"prettier/prettier": "error",
"indent": ["off", "tab"],
"linebreak-style": ["off", "windows"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
===============================================================================
// prettier
{
"singleQuote": false,
"endOfLine": "lf"
}配置stylelint
1.安裝相關(guān)依賴
yarn add stylelint stylelint-config-stardand stylelint-config-prettier stylelint-order -D - stylelint-config-prettier解決和prettier沖突 - stylelint-order 排序css屬性
2.新建.stylelint.json文件
stylelint相關(guān)規(guī)則: http://stylelint.docschina.org/user-guide/rules/
{
"plugins": ["stylelint-order"],
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {
"property-no-unknown": true,
"comment-no-empty": [
true,
{
"message": "禁止空注釋"
}
],
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"float",
"width",
"height",
"max-width",
"max-height",
"min-width",
"min-height",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"margin-collapse",
"margin-top-collapse",
"margin-right-collapse",
"margin-bottom-collapse",
"margin-left-collapse",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"clear",
"font",
"font-family",
"font-size",
"font-smoothing",
"osx-font-smoothing",
"font-style",
"font-weight",
"hyphens",
"src",
"line-height",
"letter-spacing",
"word-spacing",
"color",
"text-align",
"text-decoration",
"text-indent",
"text-overflow",
"text-rendering",
"text-size-adjust",
"text-shadow",
"text-transform",
"word-break",
"word-wrap",
"white-space",
"vertical-align",
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
"pointer-events",
"cursor",
"background",
"background-attachment",
"background-color",
"background-image",
"background-position",
"background-repeat",
"background-size",
"border",
"border-collapse",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-color",
"border-image",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-spacing",
"border-style",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-width",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-top-left-radius",
"border-radius-topright",
"border-radius-bottomright",
"border-radius-bottomleft",
"border-radius-topleft",
"content",
"quotes",
"outline",
"outline-offset",
"opacity",
"filter",
"visibility",
"size",
"zoom",
"transform",
"box-align",
"box-flex",
"box-orient",
"box-pack",
"box-shadow",
"box-sizing",
"table-layout",
"animation",
"animation-delay",
"animation-duration",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function",
"animation-fill-mode",
"transition",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
"background-clip",
"backface-visibility",
"resize",
"appearance",
"user-select",
"interpolation-mode",
"direction",
"marks",
"page",
"set-link-source",
"unicode-bidi",
"speak"
]
}
}
3.效果
保存自動(dòng)修復(fù)
采用的vscode編輯器, 往setting.json添加配置
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true,
"source.fixAll.eslint": true
},到此這篇關(guān)于React項(xiàng)目配置prettier和eslint的文章就介紹到這了,更多相關(guān)React配置prettier和eslint內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了React中immutable的UI組件渲染性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
useCallback是react中比較重要的一個(gè)hook，useCallback 用來返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
React Native中NavigatorIOS組件的簡單使用詳解
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了詳解React的回調(diào)渲染模式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
React跨端動(dòng)態(tài)化之從JS引擎到RN落地詳解
這篇文章主要為大家介紹了React跨端動(dòng)態(tài)化之從JS引擎到RN落地，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React實(shí)現(xiàn)雙滑塊交叉滑動(dòng)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)雙滑塊交叉滑動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
react實(shí)現(xiàn)全局組件確認(rèn)彈窗
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)全局組件確認(rèn)彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
react實(shí)現(xiàn)復(fù)選框全選和反選組件效果
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)復(fù)選框全選和反選組件效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript React如何修改默認(rèn)端口號(hào)方法詳解
這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號(hào)方法詳解，文中通過步驟圖片解析介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
React是用于構(gòu)建用戶界面的JavaScript庫。本文詳細(xì)講解了React的生命周期，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06