前端代码构建规范相关
eslint 使用
前公司使用了eslint ，但很多时候并未发展到很好的作用，大多是用来检测简单的语法书写规范问题。(笑)
使用发展
-
早期直接简单粗暴的使用了这套，会直接对rule进行调整
eslint-config-standard
-
后面以阿里eslint-config作为底层的配置
eslint-config-ali，主要用到了base中的 variables.js
关于 .eslintrc 配置大概如下，rules规则件eslint rules , eslint config配置
{
"extends": "eslint-config-ali",
"rules": {
// 自定义规则 可以覆盖 原配置
}
}
- 同时还会添加一个
.eslintignore 对需要eslint的文件进行屏蔽
editorconfig 使用
项目中通常还会加入 .editorconfig 书写规范配置，配置如下。也可参editorconfig照官网
# editorconfig.org
root = true
[*]
indent_style =space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
这个定义时参考了腾讯团队代码规范 做了一些根据业务场景的细小调整例如 样式文件命名使用中划线
sass或less 换行等
end
附上一个简单编写规范配置的eslint
{
"extends": "eslint-config-ali",
"parser": "babel-eslint",
"env": "windows",
"globals": {
"GLOBAL": true
},
"rules": {
"arrow-body-style": ["error", "always"],
"no-const-assign": "error",
"no-var": "error",
"no-new-symbol": "error",
"no-useless-rename": ["error"],
"prefer-const": "error",
"rest-spread-spacing": ["error", "always"],
"lines-around-directive": ["error", { "before": "always", "after": "never" }],
"array-bracket-spacing": ["error", "never"],
"capitalized-comments": [
"error",
"always",
{
"ignorePattern": "pragma|ignored",
"ignoreInlineComments": true
}
],
"eol-last": ["error", "always"],
"line-comment-position": ["error", { "position": "above" }],
"linebreak-style": ["error", "windows"],
"multiline-comment-style": ["error", "starred-block"],
"no-mixed-spaces-and-tabs": "error",
"no-trailing-spaces": "error",
"no-multiple-empty-lines": ["error", {"max": 2}]
}
}
前端代码构建规范相关
eslint 使用
使用发展
早期直接简单粗暴的使用了这套，会直接对rule进行调整
eslint-config-standard
后面以阿里eslint-config作为底层的配置
eslint-config-ali，主要用到了
base中的variables.js关于
.eslintrc配置大概如下，rules规则件eslint rules , eslint config配置{ "extends": "eslint-config-ali", "rules": { // 自定义规则 可以覆盖 原配置 } }.eslintignore对需要eslint的文件进行屏蔽// 例如 build/*.jseditorconfig 使用
项目中通常还会加入
.editorconfig书写规范配置，配置如下。也可参editorconfig照官网end
{ "extends": "eslint-config-ali", "parser": "babel-eslint", "env": "windows", "globals": { "GLOBAL": true }, "rules": { "arrow-body-style": ["error", "always"], "no-const-assign": "error", "no-var": "error", "no-new-symbol": "error", "no-useless-rename": ["error"], "prefer-const": "error", "rest-spread-spacing": ["error", "always"], "lines-around-directive": ["error", { "before": "always", "after": "never" }], "array-bracket-spacing": ["error", "never"], "capitalized-comments": [ "error", "always", { "ignorePattern": "pragma|ignored", "ignoreInlineComments": true } ], "eol-last": ["error", "always"], "line-comment-position": ["error", { "position": "above" }], "linebreak-style": ["error", "windows"], "multiline-comment-style": ["error", "starred-block"], "no-mixed-spaces-and-tabs": "error", "no-trailing-spaces": "error", "no-multiple-empty-lines": ["error", {"max": 2}] } }