git提交程式碼自動格式化
git提交程式碼時自動遵照eslint+prettier規範格式化程式碼
一、環境準備
1、node 6.10+
2、npm 3.10+
二、所需依賴包
1、@vue/cli-plugin-eslint 注入vue-cli-service lint 命令
2、@vue/eslint-config-prettier 設定一些不必要的或者是與prettier衝突的lint選項
3、eslint eslint-loader babel-eslint Eslint的三個外掛用於規範的約束
4、husky 用於git執行指令碼
5、lint-staged 用於配置git指令碼方法
三、配置prettier 如果是新專案,在cli生成專案時選Yes即可(跳過第三條),如果是老專案,當時並沒有選擇這項功能那麼請接著看:
1、安裝依賴
npm install prettier -g
2、在根目錄下新建 .prettierrc檔案並輸入以下內容(當然你也可以自行配置):
{ "printWidth": 150, "singleQuote": true, "trailingComma": "none", "semi": true, "tabWidth": 4, "useTabs": false, "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always", "proseWrap": "preserve", "overrides": [ { "files": [ "*.json", ".eslintrc", ".tslintrc", ".prettierrc", ".tern-project" ], "options": { "parser": "json", "tabWidth": 4 } }, { "files": "*.{css,sass,scss,less}", "options": { "parser": "css", "tabWidth": 4 } }, { "files": "*.ts", "options": { "parser": "typescript" } }, { "files": "*.vue", "options": { "parser": "vue" } }, { "files": "*.md", "options": { "parser": "markdown" } } ] }
3、在package.json的 (可有可無,下面會有更好的方法)
"scripts": {
"format": "prettier --write \"**/*.{js,css,md}\"", //npm run format格式化命令
},
四、配置Eslint 如果是新專案,在cli生成專案時選Yes即可(跳過第四條,如果是老專案,當時並沒有選擇這項功能那麼請接著看:
1、安裝上述有關Eslint的依賴包
2、根目錄下新建 .eslintrc.js檔案或者 .eslintrc.josn檔案都可以,本文采用.eslintrc.js。建立完成之後新增如下程式碼:
module.exports = { root: true, //此項是用來告訴eslint找當前配置檔案不能往父級查詢 env: { node: true //指定指令碼執行環境 }, extends: ['plugin:vue/essential', '@vue/prettier'], //擴充套件配置規則 這裡使用prettier rules: { //自定義規則,當規則與prettier衝突時以下面為準,規則還有很多,暫不列舉 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-undef': 'off',//未定義變數 'no-unused-vars':'off',//定義了但未使用的變數 'no-redeclare':'off',//重複宣告的變數 'no-empty': 'off',//塊語句中的內容不能為空 }, parserOptions: { //EsLint預設使用esprima做指令碼解析,可以切換成babel-eslint解析等主流的解析方式 parser: 'babel-eslint' } };
3、在webpack.base.conf.js的rules裡新增如下:
{
test: /\.(js|vue)$/,
loader: ['babel-loader','eslint-loader'],
include:[resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]
},
4、在package.json的
"scripts": {
"lint": "vue-cli-service lint", //建立npm run lint 命令
},
5、至此Eslint 已全部配置完成,可以npm start 控制檯會提示各種error和warring的資訊,根據資訊你可以清楚的看到那些程式碼是不符合規範要求的,然後執行npm run lint會幫你修復部分程式碼,未能自動修復部分,請自行手動修復,或者移除該規則。
五、配置git指令碼
1、安裝依賴
注:在安裝lint-staged的時候會出現如下錯誤:
D:\ztemapgit\ZtMapUI>npm install lint-staged -D
npm ERR! Unexpected end of JSON input while parsing near '...ectories":{},"dist":{'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2018-10-10T08_00_39_403Z-debug.log
解決:執行指令如下:
npm cache clean --force
2、配置 package.json的
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"linters": {
"src/**/*.js": [ //路徑規則(譯:src下面的所有js檔案,可自行配置)
"vue-cli-service lint",
"git add"
],
"src/**/*.vue": [
"vue-cli-service lint",
"git add"
]
}
},//git提交程式碼的時候就會根據vue-cli-service lint指令進行修改程式碼
注:除了安裝依賴的時候會因為環境或者網路問題出現錯誤外,其他的按照步驟進行,應該會很順利