建站
咨詢
售后
建站咨詢
新聞中心
在日常工作中，我們會接觸形形色色的工程。如果工程使用的技術架構不同，可能會有對應不同的代碼規(guī)范。而每個人的編碼習慣是不一樣的，也是難以短時間內改變的，這也是我們常常在開發(fā)一個新工程的時候，會遇到各種規(guī)范報錯的原因。
裕華網站建設公司成都創(chuàng)新互聯(lián)公司,裕華網站設計制作，有大型網站制作公司豐富經驗。已為裕華上千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站制作要多少錢，請找那個售后服務好的裕華做網站的公司定做！
此時，如果能有一套配置，能夠讓我們在寫代碼時不用考慮該工程的規(guī)則，只要在保存時就能夠自動按照當前工程配置好的規(guī)則修復所有錯誤，這無疑會大大增加我們的開發(fā)體驗和效率。
下面我將詳細講解為了實現(xiàn)這一目標，我們需要做什么，以及各種規(guī)范的基本配置。
EditorConfig
首先，我們需要一個基本的規(guī)范，例如縮進，如何換行等等。它要適用于所有的團隊，適用于所有的語言，適用于所有的編輯器。
EditorConfig 能幫助我們實現(xiàn)這一點。它讓所有的開發(fā)者在基本編碼規(guī)范上保持一致。
我們需要做的是：
- 安裝 EditorConfig 插件（有些編輯器默認支持 EditorConfig ，具體請看 這些編輯器不需要安裝插件 (https://editorconfig.org/#pre-installed)）。
- 配置 .editorconfig 文件。
以下是 .editorconfig 的用法和例子：
## 打開文件時，EditorConfig 插件會在打開的文件的目錄和每個父目錄中查找名為 .editorconfig 的文件。 ## 如果到達根文件路徑或找到具有 root=true 的 EditorConfig 文件，將停止對 .editorconfig 文件的搜索。## 如果 root=true 沒有配置, EditorConfig 插件將會在工程之外尋找 .editorconfig 文件
root = true
## 使用規(guī)則匹配文件## * 匹配任何字符串，路徑分隔符 (/) 除外## ** 匹配任意字符串## ? 匹配任何單個字符## [name] 匹配給定的字符串中的任何單個字符## [!name] 匹配不在給定字符串中的任何單個字符## {s1,s2,s3} 匹配任意給定的字符串## {num1..num2} 匹配num1和num2之間的任何整數(shù)，其中num1和num2可以是正數(shù)或負數(shù)## 如規(guī)則[*.{js}]只對 .js 文件生效。一般來說，我們配置 [*] 對所有文件生效。
[*]
## 縮進方式。 值可以是 tab 或者 space
indent_style = space
## 縮進大小。當設置為 tab 時，會取 tab_width 的值。
indent_size = 2
## 通常不需要設置。當 indent_size = tab 時，才會生效。
tab_width = 2;
## 設置為 lf、cr 或 crlf 以控制如何表示換行符。
end_of_line = lf
## 設置為 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 來控制字符集。
charset = utf-8
## 設置為 true 以刪除換行符之前的任何空格字符，設置為 false 以確保不會。
trim_trailing_whitespace = true
## 設置為 true 以確保文件在保存時以換行符結束，設置為 false 以確保不以換行符結束。
inset_final_newline = true
Eslint
對于前端開發(fā)工程師來說，JavaScript 無疑是我們最好的伙伴了。而 ESLint，它是一款插件化的 JavaScript 代碼靜態(tài)檢查工具，其核心是通過對代碼解析得到的 AST（Abstract Syntax Tree，抽象語法樹）進行模式匹配，定位不符合約定規(guī)范的代碼。
社區(qū)里有很多不同版本的規(guī)范，每個團隊也可能會制定自己的規(guī)范。編碼風格千千萬，而工程的配置就一套，在多人協(xié)作時就必然會出現(xiàn)規(guī)范報錯的情況。我們需要配置一套規(guī)則，讓我們不需要 Care 規(guī)則到底是什么，在保存文件的時候，自動按照工程規(guī)范格式化代碼。
怎么辦呢？
Eslint 提供了風格指南規(guī)則，并明確表示了哪些是可修復的：Stylistic Issues (https://cn.eslint.org/docs/rules/#stylistic-issues)
我們需要做的是：
- 本地安裝 Eslint 和社區(qū)推薦的規(guī)范 eslint-config-airbnb (https://github.com/airbnb/javascript) （也可以是別的規(guī)范）。插件會使用安裝的 Eslint 庫（如果你還未安裝：npm i eslint eslint-config-airbnb）。
- VSCode 安裝 Eslint插件。
- 添加 .eslintrc.js 配置文件。
- 更改 VSCode 的 setting.json 文件的配置。
其中，想要實現(xiàn)自動按照工程的規(guī)則格式化，第四步必不可少。
setting.json
如果你已經安裝好了 Eslint插件，按 cmd + shif + p，打開 defaultSettings.json 文件，按 cmd + f 搜索 eslint 可以看到所有 ESlint 在 VSCode 內的默認配置。我們需要對它做一些修改。
還是按 cmd + shift + p 打開 settings.json 文件。這個文件是用戶自定義配置，里面的配置會覆蓋 defaultSettings.json 里的同名配置。我們在這個文件里對 ESLint 插件 的配置做一些修改，讓它達到我們想要的效果。
首先，我們想要 保存時自動格式化，實現(xiàn)這個效果的配置有三種：
- editor.formatOnSave + eslint.format.enable。前者配置：保存時格式化，后者配置：將 ESlint 規(guī)則作為格式化標準。
- eslint.autoFixOnSave
- editor.codeActionsOnSave
其中，第二種 eslint.autoFixOnSave 已經被廢棄。使用它會提示更改為 editor.codeActionsOnSave。
而第一種和第三種都可以實現(xiàn)，但是更推薦使用第三種 editor.codeActionsOnSave，它支持更高的可配置性。
使用 editor.codeActionsOnSave 的時候，我們需要禁用其它格式化程序，最好的做法是將 ESlint 設置為格式化程序默認值。并且當我們這么做的時候，我們可以關閉 editor.formatOnSave，否則我們的文件將被修復兩次，這是沒有必要的。
以下便是我們需要在 setting.json 里新增的配置。（注釋的地方是默認配置，無需新增）
// 編輯的時候檢測還是保存的時候檢測，默認在編輯的時候就檢測。default: onType
// "eslint.run": "onType",
// default: false
// "eslint.format.enable": false,
// default: false
// "editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// 始終在VSCode的右下角狀態(tài)欄顯示 ESLint 字樣，查看 ESLint 運行狀態(tài),確保 ESLint 在正常運行
"eslint.alwaysShowStatus": true,
.eslintrc.js
接下來，我們聊聊 .eslintrc.js 文件。這個文件將會規(guī)定我們的 ESLint 具體該使用什么規(guī)則去規(guī)范我們的代碼。
我們自己往往不需要去配置這個文件，因為工程一般都會配置好了一套規(guī)則。我們只需要使用這套規(guī)則去格式化代碼就好了。
但是看懂每條規(guī)則的意義，對于我們也是很重要的，例如你想自己新建工程。
接下來，我將從 普遍用法、Vue項目特殊配置、React項目特殊配置 來看下如何配置 .eslintrc.js 文件。
普遍用法
- 默認情況下，ESLint 支持 ES5 的語法。我們可以覆蓋這個配置，啟用對 ES6、 ES7 ... 的支持 (https://cn.eslint.org/docs/user-guide/configuring#specifying-parser-options)。
// 啟用對 es6 的語法和全局變量的支持
{
env: {
es6: true,
},
}
- 如果我們想讓 ESLint 不僅能識別瀏覽器環(huán)境中的語法，其它環(huán)境(https://cn.eslint.org/docs/user-guide/configuring#specifying-environments)(如 Node)我們也希望它能識別，這時候我們可以這樣配置：
{
env: {
browser: true,
node: true,
},
}
- 在一些項目中，我們需要特殊的解析器去解析我們的代碼，是否是符合規(guī)范的。這時候我們可以使用 Parser (https://cn.eslint.org/docs/user-guide/configuring#specifying-parser)
{
parser: 'babel-eslint',
}
- 當訪問當前源文件內未定義的變量時，no-undef (https://cn.eslint.org/docs/rules/no-undef) 規(guī)則將發(fā)出警告。如果你想在一個源文件里使用全局變量，推薦你 在 ESLint 中定義這些全局變量 (https://cn.eslint.org/docs/user-guide/configuring#specifying-globals)，這樣 ESLint 就不會發(fā)出警告了。
當訪問當前源文件內未定義的變量時，no-undef 規(guī)則將發(fā)出警告。如果你想在一個源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發(fā)出警告了。
{
globals: {
"__DEV__": true,
"If": true,
"For": true,
"POBrowser": true
},
}
- ESLint 支持使用第三方插件 (https://cn.eslint.org/docs/user-guide/configuring#configuring-plugins)。在使用插件之前，你必須使用 npm 安裝它。在配置文件里配置插件時，可以使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。
{
plugins: ['react-hooks', 'jsx-control-statements'],
}
- ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項目中要使用的規(guī)則 (https://cn.eslint.org/docs/user-guide/configuring#configuring-rules)。要改變一個規(guī)則設置，你必須將規(guī)則 ID 設置為下列值之一：
- "off" 或 0 - 關閉規(guī)則
- "warn" 或 1 - 開啟規(guī)則，使用警告級別的錯誤：warn (不會導致程序退出)
- "error" 或 2 - 開啟規(guī)則，使用錯誤級別的錯誤：error (當被觸發(fā)的時候，程序會退出)
{
rules: {
eqeqeq: 'off',
curly: 'error',
quotes: ['error', 'double']
}
}
- 配置定義在插件中的一個規(guī)則的時候，你必須使用 插件名/規(guī)則ID 的形式。比如：
{
plugins: ['react-hooks', 'jsx-control-statements'],
rules: {
'arrow-parens': 0,
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'jsx-control-statements/jsx-use-if-tag': 0,
'react/jsx-no-undef': ['error', { 'allowGlobals': true }],
'no-prototype-builtins': 'off',
}
}
- ESLint 的配置規(guī)則實在太多，如果我們自己一條條規(guī)則去配置，這個工作了將會非常大。我們可以直接拿現(xiàn)有的規(guī)范來使用 (https://cn.eslint.org/docs/user-guide/configuring#extending-configuration-files)。
{ extends: 'zoo/react',}
Vue 特殊配置
由于 Vue 單文件組件的特殊寫法，針對 Vue 項目，需要做一些特殊的 ESLint 配置，以達到自動化的效果。
高亮語法支持
安裝 Vetur插件。
使用 ESLint 而不是 Vetur 做代碼檢測
Vetur 為 Vue 項目帶來了語法高亮和便捷的操作。但是它本身也會自動開啟對 Vue 文件的代碼檢測。這往往會和我們配置的 ESLint 有沖突。為了避免這一點，需要在 VSCode 的 settings.json 中做一些配置：
// 不允許它格式化代碼
"vetur.format.enable": false,
// 不允許它做代碼檢測
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,
無需將 vue 添加進 eslint.validate,因為 eslint.probe 默認會檢測 vue 類型文件。
然后，我們需要配置 .eslintrc.js 文件，里面用到的插件都需要本地安裝。
module.exports = {
root: true,
// 如果是SSR項目，則需要配置node:true
env: {
browser: true,
node: true,
},
// 為什么是這樣的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
},
extends: [
// 如果是nuxt.js的腳手架項目，則需要安裝對應的插件并做以下配置
'@nuxtjs',
'plugin:nuxt/recommended',
// 讓eslint可以規(guī)范vue文件
'plugin:vue/base',
// vue3的項目需要使用，如果是vue2項目，使用 plugin:vue/recommended
'plugin:vue/vue3-recommended',
],
plugins: [
// 注意這里不能配置 html 選項，為什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
'vue',
],
// 配置自己的規(guī)則，覆蓋上面繼承的規(guī)則
rules: {
// 配置js的縮進為 2，switch case 語句的 case 也使用2個空格縮進
indent: ['error', 2, { SwitchCase: 1 }],
// 使用 eslint 檢測 template里的代碼，這里我配置 2 個空格縮進
'vue/html-indent': ['error', 2],
},
};
以上配置，大家根據自己的項目特點，自行刪減即可。比如，如果你的項目不是 nuxt.js 的，可以去掉 extends 里的 '@nuxtjs 和 plugin:nuxt/recommended。
如果是 Vue cli 創(chuàng)建的項目，并且沒有使用 ts，需要在項目根目錄添加 jsconfig.json 文件。有關 jsconfig 的配置在這里：jsconfig (https://code.visualstudio.com/docs/languages/jsconfig)
React 特殊配置
React 項目中，因為是 .js 文件，一般不需要特殊的配置。但即使如此，針對 JSX 和 Hooks 的使用規(guī)則，我們仍然需要做一些事情
針對 React Hooks
lint 規(guī)則具體強制了哪些內容？(https://zh-hans.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce)
eslint-plugin-hooks 是 React 源碼目錄 packages 里提供的一個包。它會強制執(zhí)行 Hooks 規(guī)則，它也是 Hooks API 的一部分。
npm i eslint-plugin-reack-hooks
在 .eslintrc.js 中
module.exports = {
// eslint-plugin 可以簡寫
plugins: ['react-hooks'],
}
針對 JSX
JSX 不過只是 React 的一個語法糖，其最終都會被 React 調用 React.createElement 編譯成 React Element 形式。所以在 17 版本之前，如果我們使用到了 JSX 但是沒有引入 React ，會提示 'React' must be in scope when using JSX。而在 17 版本之后， React 與 Babel 和 TypeScript 編譯器合作，將轉化任務交給了編譯器自動轉化。
如果我們是之前的轉化版本，我們要獲得對 JSX 的語法支持，我們需要安裝 eslint-plugin-react,它內置了對 JSX 的代碼規(guī)范檢測。
{
extends: ['plugin:react/recommended'],
}
如果不想使用內置的規(guī)則，我們也可以自定義規(guī)則
{
plugins: ['react'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: {
'react/jsx-no-undef': ['error', { "allowGlobals": true }],
},
}
如果是新的轉化版本，則需要做一點小小的更改,以便在使用 JSX 的時候，不會要求我們引入 React。
{
extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
}
StyleLint
在完成了以上的配置之后，我們已經可以對 .js 文件、.vue 文件的 template 和 script 模塊實現(xiàn)代碼規(guī)范和保存時自動格式化了。但是對于 .css、.less、.scss 文件和 .vue 文件的 style 模塊，我們還需要做額外的配置，否則樣式部分不規(guī)范，我們也是沒法檢測并自動修復的。
我們需要做的是：
- npm i stylelint stylelint-config-standard stylelint-scss。
- 安裝 Stylelint插件。
- 配置 .stylelintrc 文件。
- 配置 VSCode 的 setting.json 文件。
其中，第四步也是必須的，我們需要做如下配置：
// 防止編輯器內置的 [css] [less] [scss] 校驗和此擴展 [stylelint] 報告相同的錯誤
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 保存時使用 eslint 和 stylelint 進行修復
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
// 默認會對很多文件進行檢測，這是不必要的，我們只讓他檢測樣式
"stylelint.validate": [
"css",
"html",
"less",
"postcss",
"sass",
"scss",
"source.css.styled",
"styled-css",
],
以上，我們的目標已經達成啦！
Prettier
代碼格式化工具。很多同學都接觸過這個工具，我個人深入了解了一下這個工具，以下是我的個人見解。先看下 Prettier 官方的一段話吧。
So why choose the “Prettier style guide” over any other random style guide? Because Prettier is the only “style guide” that is fully automatic. Even if Prettier does not format all code 100% the way you’d like, it’s worth the “sacrifice” given the unique benefits of Prettier, don’t you think?
可以看到，這個工具旨在讓不同公司不同團隊不需要考慮代碼規(guī)范，實現(xiàn)自動化保存格式化。犧牲掉個性化內容。
但是往往不同的團隊對規(guī)則的使用是不一致的，如果強制所有文件都使用 prettier 自動格式化，會出現(xiàn)與公司配置的代碼規(guī)范檢查工具（例如 ESLint） 沖突的情況。實際表現(xiàn)為自動保存之后，依然出現(xiàn) ESLint 格式報錯。
想讓 prettier 生效，需要我們在 VSCode 里配置：
// 所有文件都使用 prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 只對 js 文件使用 prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
// 所有文件都不指定自動格式化方式
"editor.defaultFormatter": null,
// js文件不指定自動格式化方式
"[javascript]": {
"editor.defaultFormatter": null
}
可以使用 .prettierrc 文件、VSCode 的 setting.json 、.editorConfig 來配置 prettier。
推薦不常使用的文件類型，使用 prettier 去格式化。js,json,jsx,html,css,less,vue 等這些文件，使用工程統(tǒng)一的規(guī)范去格式化。
所以，我覺得完全可以卸載它。不知道你怎么看呢？
以上就是全部內容了，希望對你有所幫助～
新聞名稱：使用這些配置規(guī)范并格式化你的代碼
當前路徑：http://www.fisionsoft.com.cn/article/cocgooe.html
