在日常的開發工作中，我們很容易犯一些比較低階的錯誤，比如少了一個右括號，多了一個點號或者少了一個點號等等，有時候這些錯誤排查起來甚至很費時間，那麼今天，我們就來聊聊這個問題的一些解決辦法：

在我們的日常開發中，只需要用上程式碼的靜態檢測就可以很好的規避這些問題，下面我們將介紹在前端開發中的 css、html、js的靜態程式碼檢測

由於我在平時的開發中用到的編輯器是sublime，所以這裡也會順便講下sublime的程式碼檢測配置，首先需要安裝 SublimeLinter 外掛

樣式檢測

style是css樣式程式碼的靜態檢測，首先我們進入到我們的專案目錄裡，安裝stylelint

npm i -D stylelint

新建 .stylelintrc 檔案來進行規則配置，安裝擴充套件 npm I -D stylelint-config-standard

{
	"extends": "stylelint-config-standard",
	"rules": {
		"indentation": "tab",
		"comment-whitespace-inside": "off"
	}
}

在編輯器中，我們安裝 SublimeLinter-stylelint外掛,然後在SublimeLinter的配置檔案中linters裡新增:

"stylelint"
 
: {
    "@disable": false,
    "args": [],
    "excludes": [
        "dist/*",
        "node_modules/*"
    ],

    "lint_mode": "background",
    "styles": [{
        "icon": "circle",
        "mark_style": "fill",
        "scope": "region.redish markup.error.sublime_linter"
    }]
},

如果想不檢測忽略某些檔案而不檢測，可以新建.stylelintignore

xml檢測

在編輯器中我們需要安裝sublimelinter-xmllint，在安裝這個外掛之前需要檢查你的系統中是否安裝了xmllint ，如果沒有，則需要進行安裝，新版的 Mac系統中自帶了它，linux中可以通過下面的命令來安裝：

apt-get install libxml2-utils

在編輯器中，我們安裝 SublimeLinter-xmllint外掛,然後在SublimeLinter的配置檔案中linters裡新增:

 "xmllint": {
     "@disable": false,
     "args": [],
     "excludes": [
         "dist/",
         "node_modules/"
     ],
     "lint_mode": "background",
     "styles": [{
         "icon": "circle",
         "mark_style": "fill",
         "scope": "region.redish markup.error.sublime_linter"
     }]
 },

js檢測

eslint是js語法的靜態檢測，在專案目錄裡安裝依賴：

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

如果專案用的是vue則需要安裝：

npm i -D eslint-plugin-vue

如果是react需要安裝

npm i -D eslint-plugin-react

然後在專案目錄裡新建 .eslintrc.js 和 .eslintignore 檔案，下面以vue為例向eslint配置檔案中寫入：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
	root: true,
	parserOptions: {
		parser: 'babel-eslint'
	},
	env: {
		browser: true
	},
	extends: [
		// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
		// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
		'plugin:vue/essential',
		// https://github.com/standard/standard/blob/master/docs/RULES-en.md
		'standard'
	],
	// required to lint *.vue files
	plugins: [
		'vue'
	],
	// add your custom rules here
	rules: {
		'vue/no-parsing-error': ['off', {
			'x-invalid-end-tag': false
		}],
		'vue/require-prop-types': 'off',
		'vue/valid-template-root': 'off',
		'vue/require-valid-default-prop': 'off',
		'no-unreachable': 'error',

		'indent': ['error', 'tab'],
		'no-tabs': ['off', {
			'allowIndentationTabs': true
		}],
		// "no-unused-expressions": 2,
		// allow async-await
		'no-unmodified-loop-condition': 'off',
		'generator-star-spacing': 'off',
		// allow debugger during development
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
	}
}

在.eslintignore檔案中配置忽略檔案

在編輯器中，我們安裝 SublimeLinter-eslint外掛,然後在SublimeLinter的配置檔案中linters裡新增:

'eslint': {
	'@disable': false,
	'env': {
		'PATH': '/Users/tzjvon/.nvm/versions/node/v8.11.3/bin/'
	},
	'selector': 'text.html.vue, source.js - meta.attribute-with-value',
	'args': [],
	'excludes': [
		'dist/*',
		'node_modules/*'
	],
	// "lint_mode": "manual",
	'styles': [{
		'icon': 'circle',
		'mark_style': 'fill',
		'scope': 'region.redish markup.error.sublime_linter'
	}]
}

現在檢測有了，我們還可以進行自動修復，安裝 prettier-eslint-cli 這個依賴包，可以通過:

prettier-eslint --write 'src/**/*.js'

來實現自動fix，當然也可以通過 prettier 來修復js和css

醬紫就OK了，然後我們還可以安裝 SublimeLinter-eslint-fix 外掛來實現根據配置檔案來自動修復功能，預設繫結的快捷鍵是 command + k , command + e。好了，現在已經非常好用…
但是我們會發現，檢測報錯的主題不是很漂亮呀，怎麼辦呢，沒關係，接下來我們來給它換上一件時髦的外衣：

安裝 Edge Theme Addon 外掛，然後在sublimelinter的配置檔案中修改：

"gutter_theme": "Packages/Edge Theme Addon - Linter Theme/Edge.gutter-theme"
"styles": [{
  "mark_style": "fill",
  /*outline fill*/
  "priority": 1,
  "scope": "region.yellowish markup.warning.sublime_linter",
  "icon": "Packages/edge-theme-addon-linter-theme/warning.png",
  "types": ["warning"]
}, {
  "mark_style": "fill",
  "priority": 1,
  "scope": "region.redish markup.error.sublime_linter",
  "icon": "Packages/edge-theme-addon-linter-theme/error.png",
  "types": ["error"]
}],

然後可以將 linters 子項裡面的 styles選項註釋掉了，怎麼樣，是不是看上去更棒了…

上面這些都會了，那麼接下來我們還需要一個功能，那就是在程式碼提交的時候能實現自動程式碼靜態檢測，如果通過了，就讓它提交，如果沒有通過，則不能提交，好了，閒言少敘，我們繼續開魯

首先我們來安裝依賴：

npm i -D husky lint-staged

新增鉤子函式

 "scripts": {
        ...
        "precommit": "lint-staged", // git commit 執行這個命令，這個命令在調起 lint-staged
    },

建立 .lintstagedrc 配置檔案，寫入：

{
	"src/**/*.{js,vue}": [
		"./node_modules/.bin/eslint --fix",
		"git add"
	]
}

OK，現在每次git commit的時候都會進行程式碼檢測了

好了，今天的文章到此結束啦！歡迎在評論區留言