項目代碼格式校驗 · 工具安裝教程

[TOC] ### 1. 安裝插件（保存時使用eslint進行代碼檢查） ~~~ "@vue/cli-plugin-eslint": "^3.0.3", "@vue/eslint-config-airbnb": "^3.0.3", ~~~ ### 2. 創建.eslintrc.js文件 ~~~ module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/airbnb'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 在這里自定義修改 'linebreak-style': 0, semi: [2, 'never'], // 不加分號 'no-unused-expressions': [2, { allowShortCircuit: true, allowTernary: true }], // 允許三元 'no-plusplus': 0, // 開啟i++ 'comma-dangle': [2, 'never'], // 結尾不使用逗號 'import/no-unresolved': [2, { ignore: ['esri', 'dojo'] }], // 解決import esri/xxx編譯不通過 'import/extensions': 0, // 'no-console': 0, 'arrow-parens': [2, 'as-needed'], // 箭頭函數參數只有一個時無需加括號 'no-param-reassign': [2, { props: false }], 'no-mixed-operators': 0, // 'max-len': [2, {"code": 120} ], 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] }, parserOptions: { parser: 'babel-eslint' } } ~~~ ### 3. 創建[prettier配置]([https://segmentfault.com/a/1190000014613058](https://segmentfault.com/a/1190000014613058))（自動解決eslint中發現的問題） 1. 安裝插件 ~~~ "prettier": "^1.15.3", 安裝：yarn add prettier --dev --exact ~~~ 2. 配置prettier.config.js ~~~ /* prettier配置項 */ module.exports = { "printWidth": 100, //一行的字符數，如果超過會進行換行，默認為80 "tabWidth": 2, //一個tab代表幾個空格數，默認為80 "useTabs": false, //是否使用tab進行縮進，默認為false，表示用空格進行縮減 "singleQuote": true, //字符串是否使用單引號，默認為false，使用雙引號 "semi": false, //行位是否使用分號，默認為true "trailingComma": "none", //是否使用尾逗號，有三個可選值"<none|es5|all>" "bracketSpacing": true, //對象大括號直接是否有空格，默認為true，效果：{ foo: bar } }; ~~~ ### 4、husky，lint-staged（使用git進行commit時格式化代碼），prettier配合使用 [鏈接]([https://www.jianshu.com/p/cdd749c624d9](https://www.jianshu.com/p/cdd749c624d9)) #### 使用 husky 的具體做法如下：首先，安裝依賴： ~~~ npm install -D husky yarn add --dev husky ~~~ 然后修改 package.json，增加配置： ~~~ { "scripts": { "precommit": "eslint src/**/*.js" } } ~~~ 最后嘗試 Git 提交，你就會很快收到反饋： ~~~ git commit -m "Keep calm and commit" ~~~ #### lint-staged 用法如下：首先，安裝依賴： ~~~ npm install -D lint-staged yarn add --dev lint-staged ~~~ 然后，修改 package.json 配置： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": "eslint" } } ~~~ 最后，嘗試提交的效果：實際上，lint-staged 給了你提交前代碼操作的更大自由度，比如使用下面的配置，自動修復錯誤： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["eslint --fix", "git add"] } } ~~~ 或者使用下面的配置，自動格式化代碼（謹慎使用）： ~~~ { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "src/**/*.js": ["prettier --write", "git add"] } } ~~~ ~~~ 項目： "lint-staged": { "src/**/*.{vue,js}": [ "yarn lint", "git add" ], "src/**/*.{json,md,css,scss}": [ "prettier --write", "git add" ] }, ~~~