vue項目 安裝eslint校驗

eslint 代碼風格校驗

Step 1 安裝

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

• 這些包是eslint-config-standard這個包的官方文檔推薦我們安裝的
• 根目錄下創建.eslintrc文件，這是個json格式的文件

.eslintrc 配置

{
	"extends": "standard"
}

npm i eslint-plugin-html -D

• 安裝eslint-plugin-html 的目的是 ，因爲.vue文件裏面是類似html格式文件，而不是javascript文件，所以eslint無法識別vue文件，所以得安裝這個包 eslint-plugin-html ，這個包是解析vue文件下script標籤裏的代碼

package.json裏面進行配置

{
	"script": {
		"lint": "eslint --ext .js --ext .jsx --ext .vue client/"
	}
}

• 這些參數的意義是
• eslint ： 使用eslint
• –ext ：後綴名 指定哪些格式的文件需要使用eslint進行校驗
• client/ ： 指定路徑

eslint 檢驗之後 進行修復

• package.json裏面進行配置

{
	"script": {
		"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
	}
}

• eslint 使用

npm run lint

npm run lint-fix

eslint 自動檢測 配置

• 每次修改代碼，都能自動校驗代碼規範
  -安裝 eslint-loader babel-eslint

npm i eslint-loader babel-eslint -D

• .eslintrc文件配置

{
	"extends": "standard",
	"plugins": [
		"html"
	],
	"parser": "babel-eslint"
}

• 使用 “parser”: “babel-eslint” 的原因 ， 項目基於wepack開發的，代碼都是要經過babel處理過的，babel處理的方式中有些語法對eslint不是特別支持，然後使用loader去處理eslint的時候就會出現一些問題，所以對於webpack+babel開發的項目，都會配置 “parser”: “babel-eslint”。

webpack.config.base.js 配置

module: {
	rules: [
		{
			test: /\.(vue|js|jsx)$/,
			loader: 'eslint-loader',
			exclude: /node_modules/,
			enforce: 'pre'//'post'
		},
		{
			test: /\.vue$/,
			loader: "vue-loader",
			options: createVueLoaderOptions(isDev)
		}
	]
}

• test 處理文件後綴名的集合
• loader
• exclude node_modules 裏有許多js文件，而且node_modules裏的js文件都是經過一些處理的，比如babel處理的，處理之後是es5的規則，而我們的eslint-standard 是es6 es7 的規則，所以把node_modules的文件去掉
• enforce 有兩個參數，pre 和 post ，pre是預處理，post是後處理。因爲.vue文件已經指定了vue-loader處理，eslint只是做代碼檢測，所以不需要處理vue的文件，所以在vue-loader 之前先檢測 eslint

項目優化

• editorconfig
• 根目錄下創建.editorconfig文件
• 作用是規範編輯器配置的

root = true // 這個項目讀 editorconfig 讀到這個文件就可以了，不用往上層目錄去搜索
[*]//指定所有文件
charset = utf-8
end_of_line = lf
indent_size = 2 //tab鍵 長度是2
indent_style = space //推薦使用space而不是windows裏的製表符
insert_final_newline = true //保存文件的時候，自動結尾加空行
trim_trailing_whitespace = true //在我們寫代碼的時候，一行後面有空格，自動去掉，一行結尾的空格

• 注意 eslint 要求代碼結尾留有一行空行
• webstorm已經默認安裝了editorconfig
• vscode 需要自行安裝editorconfig 這個插件

git 提交中的eslint使用

• Step1 安裝 husky
• 作用是，每次git commit 之前，先校驗是否符合eslint規範，不符合就不能提交
• 安裝husky後，會在項目根目錄下的.git目錄下生成一個hook，這個hook會調用package.json的某些內容，比如precommit
• 注意 安裝那些githook工具的時候，需要提前在項目中git init 初始化，如果不做git init初始化，那githook無法放入git目錄中

npm i husky -D

• Step2 package.json 配置

{
	"script": {
		"precommit": "npm run lint-fix"
	}
}

• git 初始化

git init