背景

眾所周知，前端項目的代碼質量和代碼格式的校驗是不可或缺的。很早之前在一個人開發的時候，腳手架生成vue項目的時候都沒有打開過eslint，后面有位大佬加入，給boss說，加了個插件(eslint)，有幾百個bug，我快改完了。老板投來，牛皮牛皮，真牛皮的眼神?。所以我在這篇文章中描述如何規范統一前端代碼風格。

我的環境：

node:14.4.0，npm :6.14.5，編輯器是vs code

目標

不限制IDE

只需要開啟 ESlint?

減少風格差異選擇的爭吵

全自動化，自動修復，保持原本的習慣就可以

主要用到的知識點

editorConfig 編輯器配置文件

Eslint 文件代碼檢查規范

prettier

lint-staged?提交到git之前進行一次代碼檢查

husky

關于EditorConfig

• 作用：用于解決不同運行環境，不同編輯器運行同一個項目的差異。

• 如何生效：EditorConfig插件(我的是"EditorConfig for VS code")會在打開的文件的目錄中查找名為.editorConfig的文件。然后讀取文件中的屬性，按先后順序執行。

• 代碼(屬性不區分大小寫)

# 表明是最頂層的配置文件，發現設為true時，才會停止查找.editorconfig文件
root = true
[*]
# 編碼
charset = utf-8# 設置縮進風格，tab或者空格。tab是hard tabs，space為soft tabs
indent_style = space
# 縮進的寬度
indent_size = 2# 換行符，lf、cr和crlf
end_of_line = lf# 設為true表明使文件以一個空白行結尾
insert_final_newline = true# 設為true表示會除去換行行首的任意空白字符
trim_trailing_whitespace = true

關于Eslint

ESLint 能夠檢測出代碼中的潛在問題，解決代碼質量問題。比如末尾是否空行，箭頭函數是否需要括號，定義變量是否定義未使用等等。(此處使用standard規范，還有其他的，此處不細說)

//react 安裝 eslint
eslint
eslint-plugin-standard
eslint-config-standard-react：standard 的規則配置包擴展
eslint-plugin-react：支持 react 語法
babel-eslint: 兼容ES處于實驗性階段的語法
eslint-loader：在webpack中解析
eslint-plugin-import：支持import
eslint-plugin-promise：支持promise
eslint-plugin-babel：兼容處于實驗階段的特征
//生成vue項目的時候選擇Pick an ESLint preset Standard風格，會自動安裝以下插件
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"babel-eslint": "^8.2.1",

安裝之后，將會有.eslintrc.js和.eslintignore兩個文件(沒有也可以自己生成)

//.eslintrc.js 有助于強制執行某些規則，具體rule可以調整
module.exports = {
root: true,
parserOptions: {
parser: "babel-eslint",
},
env: { browser: true, },
extends: [
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
"plugin:vue/essential",
"standard",
],
// required to lint *.vue files
plugins: ["vue", "prettier"],
// add your custom rules here
rules: {
"prettier/prettier": "error",
indent: [2, 2], // 控制縮進為2
quotes: [2, "single"], //單引號
"no-console": 0, //不禁用console
"no-debugger": 1, //禁用debugger
"no-var": 2, //對var警告
semi: 2, //強制使用分號
"semi-spacing": [2, { before: false, after: true }],
// 強制分號前后不允許空格
"no-irregular-whitespace": 0, //不規則的空白不允許
"no-trailing-spaces": 1, //一行結束后面有空格就發出警告
"eol-last": 0, //文件以單一的換行符結束
"no-unused-vars": [2, { vars: "all", args: "after-used" }], //不能有聲明后未被使用的變量或參數
"no-underscore-dangle": 0, //標識符不能以_開頭或結尾
// allow async-await
"generator-star-spacing": "off",
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
},
};
//.eslintignore 配置檢查可忽略的文件
/build/
/config/
/dist/
/*.js//package.json中的scripts里面增加如下命令
"lint": "eslint --ext .js,.vue src", //vue
"lint": "eslint --ext .js --ext .jsx src" // react

安裝prettier

使用ESLint配合這些規范，能夠檢測出代碼中的潛在問題，提高代碼質量，但是并不能完全統一代碼風格，因為這些代碼規范的重點并不在代碼風格上。因此還需要增加一個prettier

//安裝
npm i -D prettier//調用prettier對你的代碼風格進行檢查
npm i -D eslint-plugin-prettier
//在.eslintrc.js的rules中添加，"prettier/prettier": "error"
//表示被prettier標記的地方拋出錯誤信息{ "plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
//借助ESLint的autofix功能，在保存代碼的時候，自動將拋出error的地方進行fix。
//因為我們項目是在webpack中引入eslint-loader來啟動eslint的，所以我們只要稍微修改webpack的配置，就能在啟動webpack-dev-server的時候，每次保存代碼同時自動對代碼進行格式化。
const path = require('path')module.exports = {
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.join(__dirname, 'src')],
options: {
fix: true
}
}
]
}//eslint和prettier沖突的情況 安裝
npm i -D eslint-config-prettier
//.eslintrc.js
extends: [
"standard",
"plugin:vue/essential",
"plugin:prettier/recommended",
],
//.prettierrc
{
"eslintIntegration": true,
"singleQuote": true,
"semi": false,
"trailingComma": "es5",
"endOfLine": "auto"
}

Lint-staged與husky

lint-staged：確保在暫存文件的時候能夠讓錯誤格式代碼不會提交到你分支。可以定制在特定的git階段執行特定的命令

husky：git命令hook專用配置

//安裝
npm install --save-dev lint-staged husky
//package.json增加如下配置
"husky": { "hooks": { "pre-commit": "lint-staged" } },
"lint-staged": { "*.{js,vue,css,less,json,md}": [ "prettier --write", "git add" ], "**/*.less": "stylelint --syntax less", "**/*.{js,vue}": "npm run lint-staged:js" }

關于行結束符

當開發過程中，有的是mac開發，有的是windows開發，那么換行符就會沖突。

// 換行符。Mac使用 'unix' 對應 LF，Win使用 'windows' 對應 CRLF
'linebreak-style': ['error', 'unix']
//修改git全局配置，禁止git自動將lf轉換成crlf, 命令：
git config --global core.autocrlf false
//修改編輯器的用戶配置，例如vscode
"files.eol": "\n", // 文件換行使用lf方式

針對不同的框架的項目，大多都是相同的。只是針對不同的文件例如.vue或者.jsx有細微差別

尾聲

以上是一個項目的代碼錯誤和風格檢查，以及到提交環節的配置。但是在實際中，針對不同的ide還需要增加ide的配置。

以vscode為例子：當保存文件的時候將自動格式化代碼
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
}

喜歡的請點個贊，謝謝

總結

以上是生活随笔為你收集整理的eslint规范_规范统一前端代码风格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。