前端代码静态检测

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

在我们的日常开发中,只需要用上代码的静态检测就可以很好的规避这些问题,下面我们将介绍在前端开发中的 csshtmljs的静态代码检测

由于我在平时的开发中用到的编辑器是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的时候都会进行代码检测了

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

你可能感兴趣的:(前端代码静态检测)