eslint 和 editorconfig 代码规范

eslint 就是 jslint 发展来的 ，约束代码风格的。

editorconfig 是编辑器规范，多套编辑器 可以是使用同一套 config的规则；

首先 安装eslint ;cnpm i -D eslint

新建一个 文件 以 .eslintrc 。就是eslint的配置文件

{
  "extends": "standard"
}

意思是 使用starndard这个规则 ，这个 适用于 一般的js ，比较宽泛。

 

 

然后在client文件夹下面 ，设置 .eslintrc 文件 主要是针对jsx的语法设置规范；

{
  "parser": "babel-eslint",
  "env":{
    "browser": true,
    "es6": true,
    "node":true
  },
  "parserOptions": {
    "ecmaVersion":6,
    "sourceType": "module"
  },
  "extends": "airbnb",
  "rules": {
    "semi":[0]
  }
}

这段配置的意思是

parser 是代码用babel-eslint 去 解析；

env 是环境 当前环境支持 浏览器 node 和es6 环境 ；

parserOptions 解析器的配置是es6 ，和使用编码的是模块化的模式；

extend 是美国airbnb公司的 规范，此规范 对于react有一套非常不错的规范；

rules 是自己配置的规则和 extend规则 补充； 可以修改 ；当前的semi是指分号规范是否应用  0，不应用 ，1，警告，2 ，错误

安装 这几个包 

babel-eslint ；cnpm i -D babel-eslint

standard；cnpm i -D eslint-config-standard

airbnb ; cnpm i -D eslint-config-airbnb

eslint-loader  ;cnpm i -D eslint-loader
 

还有以上这几个工具的依赖包；

cnpm i -D  

eslint-plugin-import

 eslint-plugin-node

eslint-plugin-promise

eslint-plugin-react

eslint-plugin-standard

eslint-plugin-jsx-a11y （ 此处是数字11 不是字母ll），

然后在 客户端 和服务端的 webpack config配置文件里去修改 modul.rules.的配置；

 // 此配置是js/jsx应用 eslint-loader 的规则 在 处理其他的规则之前(enforce:"pre")，除了 node_module模块；
            {   enforce:"pre",
                test:/.(js|jsx)$/,
                loader: "eslint-loader",
                exclude:[path.resolve(__dirname,"../node_modules")]

            },

 然后 npm run dev: 

会发现 报了很多的错

现在来做一些 编辑器的editorconfig 

在主目录下新建 .editorconfig 文件 选择 text格式

root = true


[*]

charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

这个配置的意思是

root=true    这是 项目的根目录

[*]    所有的 文件都应用以下规则

charset = utf-8     编码格式是utf-8

indent_style = space  缩进格式是空格

indent_size = 2 每次缩进两个空格

end_of_line = lf  每行最后 mac 以 lf 结尾  win以 crlf  结尾 这边采用 lf结尾 

insert_final_newline = true  如果编辑到底部没有空余位置 则增加空行 

trim_trailing_whitespace =true  每行的编辑完成到达下一行的时候 。 如果上一行末尾有多余空格则去掉  

然后保存就完成了编辑器的规范 ；

webstorm 自带插件； vscode 和sublime的是需要安装插件的  

 

 

然后修改eslint 较验的错误

例如 

 1:19  error  Strings must use singlequote                               quotes

我们假如认为这条规则不适合  那么的话 我们可以在 eslint的规则里设置  quotes : [0] ， 规避掉这条规则；

我们也可以在找到 这行代码 的位置在后面书写 eslint的 容错 ； // eslint-disable-line ，这个错误就会消失

然后我们 就根据规则让我们的代码 更加规范 

 

 

 

我们如果使用 git来管理代码 那么在eslint 还有错误时 就不能commit 

我们这样做

 在项目下  敲  git init ；那么这个项目就 作为git 仓库管理了 ；

再给git 的init 加个 hook ，这里需要借助于  一个husky的工具  cnmp i -D husky 

在package.json里添加一个 命令行 precommit  ，就是husky的钩子 ，每次 如果在提交代码的时候都会去校验 

"lint":"eslint --ext .js --ext .jsx client/",
    "precommit":"npm run lint"

lint 的意思是  在 clinet 文件夹下面 去使用eslint 去校验文件夹下的 js和 jsx文件 

 

这样我们  git commit 的时候  如果eslint不通过  就阻止了