关于前端项目代码检测～
代码检查是一种静态的分析，经常使用于寻找有问题的模式或者代码，而且不依赖于具体的编码风格。对大多数编程语言来讲都会有代码检查，通常来讲编译程序会内置检查工具。html
开发中，代码的静态质量检查在项目质量保障方面很重要，因此愈来愈多的开发者在项目构建流程或者源码控制系统中添加静态检查的 hook，今天介绍的是如何在项目中配置一套代码检测规范。前端
eslint
ESLint 是一个开源的 JavaScript 代码检查工具。vue
ESLint 的初衷是为了让程序员能够建立本身的检测规则。全部的规则都是自由配置，各自独立 且 可插拔的（便可开启可关闭），可将结果设置成警告或错误。node
安装
npm install --save-dev eslint babel-eslint#或yarn add eslint babel-eslint --dev #添加到devDependencies依赖项类别中复制代码
官网：
eslint.orggit
配置方式
1.使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中es6
2.配置一个独立的
.eslintrc.*文件，或者直接在package.json文件里的eslintConfig字段指定配置，ESLint 会查找和自动读取它们，再者，你能够在命令行运行时指定一个任意的配置文件。github
eslint --init 命令能够建立一个配置，这样就能够继承推荐的规则。vue-cli
若是同一目录下.eslintrc 和package.json 同时存在，.eslintrc 优先级高会被使用，package.json 文件将不会被使用。复制代码
配置规则
off或 0 关闭 规则npmwarn或 1 开启规则，使用警告级别的错误error或 2 开启规则，使用错误级别的错误
配置项
parserOptions：解析器选项
env：使用
env关键字指定你想启用的环境，并设置它们为true。以下示例启用了 browser 和 Node.js 的环境：
{ "env": { "browser": true, "node": true }}复制代码
globals：使用
globals指出你要使用的全局变量。将变量设置为true将容许变量被重写，或false将不容许被重写。
{ "globals": { "var1": true, "var2": false }}复制代码
root：为了将 ESLint 限制到一个特定的项目，在你项目根目录下的
package.json文件或者.eslintrc.*文件里的eslintConfig字段下设置"root": true。ESLint 一旦发现配置文件中有"root": true，它就会中止在父级目录中寻找。extends：
extends属性值能够由如下组成：plugin:包名 (省略了前缀，好比，
vue)/配置名称 (好比
recommended)
extends: ['plugin:vue/recommended', 'eslint:recommended'],//表示采用vue和eslint推荐的核心规则复制代码
rules：启用的规则及其各自的错误级别.
全部的规则 默认都是禁用的。在配置文件中，使用"extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题。
推荐规则以下：
no-console 禁用 console
no-debugger 禁用 debugger
curly 强制全部控制语句使用一致的括号风格
eqeqeq 要求使用 === 和 !==
max-params 强制函数定义中最多容许的参数数量
block-scoped-var 强制把变量的使用限制在其定义的做用域范围内
camelcase 强制使用骆驼拼写法命名约定
eol-last 要求或禁止文件末尾存在空行
no-undef 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
no-var 要求使用 let 或 const 而不是 var
max-depth 强制可嵌套的块的最大深度
max-len 强制一行的最大长度
max-nested-callbacks 强制回调函数最大嵌套深度
comma-spacing 强制在逗号先后使用一致的空格
space-before-function-paren 强制在 function的左括号以前使用一致的空格
space-in-parens 强制在圆括号内使用一致的空格
和es6有关 的规则：
arrow-spacing 强制箭头函数的箭头先后使用一致的空格
space-before-blocks 强制在块以前使用一致的空格
semi 要求或禁止使用分号代替 ASI
complexity 指定程序中容许的最大环路复杂度
no-unneeded-ternary 禁止能够在有更简单的可替代的表达式时使用三元操做符
quotes 强制使用一致的反勾号、双引号或单引号
no-unused-vars 禁止出现未使用过的变量
one-var 强制函数中的变量要么一块儿声明要么分开声明
no-const-assign 禁止修改const声明的变量
...
配置原则
可以帮之发现代码错误的规则，都需开启
配置不依赖于某个具体项目，应尽量合理
帮助保持团队的代码风格统一，不限制开发体验
<!--关于更多eslint的规则和细节配置可参考官网~-->
.eslintignore
三方库忽略检测可在.eslintignore 中配置
third-party复制代码
关于git钩子
Git 能在特定的重要动做发生时触发自定义脚本。
钩子都被存储在 Git 目录下的 hooks 子目录中。 也即绝大部分项目中的 .git/hooks 。 当你用 git init 初始化一个新版本库时，Git 默认会在这个目录中放置一些示例脚本。 这些示例的名字都是以 .sample 结尾，若是你想启用它们，得先移除这个后缀。 把一个正确命名且可执行的文件放入 Git 目录下的 hooks 子目录中，便可激活该钩子脚本。
提交工做流钩子pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 若是该钩子以非零值退出，Git 将放弃这次提交，不过你能够用 git commit --no-verify 来绕过这个环节。 你能够利用该钩子，来检查代码风格是否一致（运行相似 lint 的程序）、尾随空白字符是否存在（自带的钩子就是这么作的），或新方法的文档是否适当。
若是把 Lint 挪到本地，而且每次提交只检查本次提交所修改的文件，上面的痛点就都解决了。Feedly 的工程师 Andrey Okonetchnikov 开发的 lint-staged 就是基于这个想法，其中 staged 是 Git 里面的概念，指待提交区，使用 git commit -a，或者先 git add 而后 git commit 的时候，你的修改代码都会通过待提交区。
git钩子建立
若是项目使用@vue/cli 脚手架生成的，官方文档提到 ，cli服务下有个Git Hook。
在安装以后，
@vue/cli-service也会安装 yorkie，它会让你在package.json的gitHooks字段中方便地指定 Git hook。{"gitHooks": { "pre-commit": "lint-staged"}}复制代码
yorkie fork 自 husky 且并不和以后的版本兼容。
vue creat hello-world复制代码
以后查看hooks目录,已经有git钩子了。
在Package.json中添加以下
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
复制代码
若是你的项目不是 用脚手架 生成的，那就须要安装husky。
未安装husky前
执行npm install husky --save-dev
复制代码
相应package.json配置以下
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"eslint",
"git add"
],
},
复制代码
你也能够经过 使用.huskyrc, .huskyrc.json or .huskyrc.js 这样的文件来配置hooks
补充说明
husky相似的工具在安装的时候会建立相关钩子
npm在install和uninstall的时候能够执行脚本
删除依赖不要在package.json中直接删除，而是用npm uninstall来删除
复制代码
lint-staged : 前端文件过滤工具
Run linters on git staged files
如上package.json中提到lint-staged，对本次被commited中的全部.js和 .vue 文件，执行eslint命令和git add命令
npm install -D lint-staged
yarn add --dev lint-staged
复制代码
以后在项目中写了一个错误语法，验证 pre-commit，
接下来commit时能够看到控制台语法报错，lint生效了
这样咱们就能够在提交代码以前 及时修正代码规范和错误。
附vue中的.eslintrc.js文件，仅供参考～
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'no-console': 1,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-var': 2,
'no-undef': 1,
'camelcase': 0,
'eol-last': 0,
'block-scoped-var': 0,
'eqeqeq': 2,
'max-params': [1, 6],
'max-depth': [1, 6],
'max-nested-callbacks': [1, 3],
'comma-spacing': [2, { before: false, after: true }],
'arrow-spacing': 2,
'max-len': [2, 120, 4, { ignoreUrls: true, ignoreComments: true }],
'key-spacing': [2, { beforeColon: false, afterColon: true }],
'space-before-function-paren': [2, { anonymous: 'always', named: 'never' }],
'space-in-parens': [2, 'never'],
'space-before-blocks': 2,
'keyword-spacing': 2,
'semi': [2, 'always'],
'complexity': [2, 20],
'curly': [2, 'all'],
'no-unneeded-ternary': 2,
'quotes': [2, 'single'],
'no-unused-vars': [2, { 'vars': 'all', 'args': 'after-used', 'ignoreRestSiblings': false }],
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
'vue/attribute-hyphenation': [2, 'always'],
'vue/html-indent': [1, 4],
'vue/html-quotes': [2, 'double'],
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
'vue/order-in-components': 2
}
}
复制代码
参考连接： github.com/typicode/hu…
下面是本人的公众号，欢迎关注，不按期更新技术文章，一块儿成长，谢谢
- 1. 检测前端代码运行时间
- 2. 前后端之代码检测
- 3. 关于代理ip检测
- 4. 前端代码检查
- 5. Docker搭建代码检测平台SonarQube并检测maven项目
- 6. 关闭Vue项目中eslint检测代码格式报错
- 7. 关于前端项目设计思考
- 8. 关于前端项目经验
- 9. 关于php与前端代码嵌套
- 10. webpack打包nodejs项目（前端代码）
- 更多相关文章...
- • Eclipse 关闭项目 - Eclipse 教程
- • Maven 构建 & 项目测试 - Maven教程
- • IntelliJ IDEA代码格式化设置
- • NewSQL-TiDB相关
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 检测前端代码运行时间
- 2. 前后端之代码检测
- 3. 关于代理ip检测
- 4. 前端代码检查
- 5. Docker搭建代码检测平台SonarQube并检测maven项目
- 6. 关闭Vue项目中eslint检测代码格式报错
- 7. 关于前端项目设计思考
- 8. 关于前端项目经验
- 9. 关于php与前端代码嵌套
- 10. webpack打包nodejs项目（前端代码）