乐趣区

6.eslint和editorconfig配置

本章节内容主要时要时参照官方文档配置即可。
eslint 配置
在根项目目录项新建.eslintrc 文件
// 这里要安装 eslint-config-standard 包,安装完后按照提示,安装相关的依赖。
// 这里主要时对项目中所有内容生效,要求比较低
{
“extends”: “standard”
}
然后在 client 目录下新建同样的文件,来规范 client 端的代码
// babel-eslint,eslint-config-airbnb 及其相关依赖包
{
“parser”: “babel-eslint”,
“env”: {
“browser”: true,
“es6”: true,
“node”: true
},
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “module”
},
“extends”: “airbnb”,
“rules”: {
“semi”: [0]
}
}
在 webpack 客户端和服务端的配置文件中,在 rules 下新增一个 rule。
{
enforce: ‘pre’, // 在 babel 编译之前进行检查
test: /.(js|jsx)$/,
loader: ‘eslint-loader’, // 使用 eslint-loader,需安装
exclude: [
resolvePath(‘../node_modules’)
]
},
配置完这些后,我们启动我们的服务。会发现出现很多错误,window 环境下可以会见到很多 ”LF” 的错误,这是因为不同的操作系统,行末的符号时不一致的。所以我们需要配置 editorconfig 文件。现在主流的 ide, 如 webstorm,vs code 都带有 edit 的插件,在项目根目录下新建.editorconfig 文件,按照如下配置即可。
root = true // 是否为根节点,说明在子目录下也可配置该文件

[*] // 用于所有文件
charset = utf-8 // 编码格式
indent_style = space // 缩进样式
indent_size = 2 // 缩进大小
end_of_line = lf // 以 lf 结尾
insert_final_newline = true // 自动在文件末尾插入新行
trim_trailing_whitespace = true // 去除行末的空格
git hook
在提交代码之前进行 lint 检查,如果不合格,不能提交代码。以前一直用的是 husky - 哈士奇,后来在 vue-cli 中看到了 yorkie, 看说明应该是 husky 的改进版本。下面来说说两者的配置方式。
// package.json 的 scripts 增加 lint 命令,检查 client 目录下的代码
“lint”: “eslint –ext .js –ext .jsx client/”

// husky: 在 scripts 下配置
“precommit”: “npm run lint”

// yorkie, 与 scripts 平级
“gitHooks”: {
“pre-commit”: “npm run lint”
}

这样,在你 commit 代码前就会进行检查,不符合要求的代码不能提交。
本节的配置位于仓库的 2 - 9 分支

退出移动版