前端代码静态检测

在日常的开发工作中，我们很容易犯一些比较低级的错误，比如少了一个右括号，多了一个点号或者少了一个点号等等，有时候这些错误排查起来甚至很费时间，那么今天，我们就来聊聊这个问题的一些解决办法：

在我们的日常开发中，只需要用上代码的静态检测就可以很好的规避这些问题，下面我们将介绍在前端开发中的 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的时候都会进行代码检测了

好了，今天的文章到此结束啦！欢迎在评论区留言