是什么操作，能让网易前端团队的代码风格完全统一？
团队协同开发由于代码风格的差异、编译的差异、设置的差异等，会遇到很多争执，经常有的有，单行代码器、标签长度、空格、大小写、未使用变量、三等号、代码代码能够改变变量等。构建良好的规范，可以让我们看到问题的清晰性，让人们看到错误的悦目，避免更多潜在的，可以欣赏一些潜在的，团队中开发的突破。
“小明，为什么你的Tab是4个空格”
“小明，你这个代码的每一行缺少了分号”
“小明，你的代码字符串，为什么是单引号不是双引号”
“小明，你的大括号代码块，起始括号发生了换行”
“小明，你的一行代码太长了，滚动条拖半天看不到尾部”
root = true
[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{json,yml,md}]
indent_style = space
indent_size = 2
-
JavaScript -
JSX -
Vue -
打字稿 -
CSS、Less、SCSS -
HTML -
JSON -
降价
{
"printWidth": 80,
"trailingComma": "es5",
"tabWidth": 2,
"singleQuote": true,
"useTabs": false,
"bracketSpacing": true,
"endOfLine": "auto"
}
foo(function1(), function2(), function3());
foo(
function1(),
function2(),
function3()
);
foo('val', 'val2', 'val3');
-
IDE引入相关插件
-
高性能执行
npm install --save-dev prettier
{
//...
"scripts": {
"prettier": "prettier --write .",
},
//...
}
npm install --save-dev eslint eslint-config-prettier eslint-config-standard eslint-plugin-
prettier eslint-plugin-react
{
"extends": [
"standard",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": {
"no-unused-vars": "warn",
"@typescript-eslint/no-use-before-define": ["error"],
"react-hooks/rules-of-hooks": "error",
}
}
-
IDE引入相关插件
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.(js|jsx|ts|tsx)": [
"eslint --fix",
"prettier --write",
"git add"
],
"src/**/*.(less|scss|css)":[
"stylelint --fix",
"prettier --write",
"git add"
]
}
-
webpack 相关加载器
npm install --save-dev eslint-loader
{
test: /\.(j|t)sx?$/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'eslint-loader',
options: {
//...
}
}
]
}
npm install --save-dev stylelint stylelint-config-recommended
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["extends"]
}
],
}
}
npm install --save-dev husky lint-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.(js|jsx|ts|tsx)": [
"eslint --fix",
"prettier --write",
"git add"
],
"src/**/*.(less|scss|css)":[
"stylelint --fix",
"prettier --write",
"git add"
]
}
「作者简介」
佑康
雷火UX资深工具开发工程师，有超过8年的前端开发经验，聚焦前端工程化提效和数据可视化技术；打造了雷火UX前端工程的“流浪行星计划”，包含Cli工具、sirius组件库、vega图表库、hamal svg icon库等工程体系。
目前在雷火UX工具开发团队负责可视化与工具相关的产品，这些工具产品为《永劫无间》、《天谕》等游戏提供了重要支持。