工欲善其事，必先利其器(eslint+prettier)

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 1,199

工欲善其事，必先利其器(eslint+prettier)

Prettier

官网

什么叫Prettier？

Prettier是一个固定的代码格式化程序，支持：

安装

1
2
3
4
5
6
7
8
9
# yarn
yarn add prettier --dev --exact
# 全局
yarn global add prettier

# npm
npm install --save-dev --save-exact prettier
# 全局
npm install --global prettier

基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  // 排版宽度,即每行最大宽度，默认值是80
  "printWidth":100,
  // 制表符宽度，每个层级缩进几个空格，默认值为2
  "tabWidth": 2,
  // 是否使用 tab 替代 space 为单位缩进，默认值为false
  "useTabs": false,
  // 分号，句尾是否自动补全分号，默认为true
  "semi": true,
  // 启用双引号，不启用单引号,默认为true
  "singleQuote": true,
  // 在 JSX 文件中使用单引号替代双引号，默认为 false
  "jsxSingleQuote": true,
  // 为多行数组的非末尾添加逗号（单行数组不需要逗号），数值：none(不添加逗号)、es5(在ES5中生效的逗号，对象数组等)，all(任何可以添加逗号的地方)
  "trailingComma": "es5",
  // 括号空格，在对象字面量和括号之间添加空格，默认为 true
  "bracketSpacing": true,
  // 将多行 JSX 元素的 > 放置于最后一行的末尾，而非换行。默认为 false
  "jsxBracketSameLine": false,
  // 箭头函数圆括号，默认为 avoid(在可以消除的情况下，消除括号)，always(一直保留括号)
  "arrowParens": "avoid",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

Eslint

代码规范

变量命名

命名必须传递足够的信息。fetchUserInfoAsync比getData更加具体

命名基础

半自动构建

husky

Husky 可以阻止无效的 git commit、git push以及其他woff行为

1
npm install husky --save-dev

lint-staged

针对暂存的git文件运行linters并且不要让💩滑入你的代码库！

1
npm install lint-staged --save-dev

commitlint

规范 commit message,便于自动生成 CHANGELOG

1
npm install commitlint @commitlint/cli @commitlint/config-conventional --save-dev

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// commitlint.config.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      ["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"]
    ],
    "subject-full-stop": [0, "never"],
    "subject-case": [0, "never"]
  }
}
/** 
 * feat：新功能（feature）
 * fix：修补bug
 * docs：文档（documentation）
 * style： 格式（不影响代码运行的变动）
 * refactor：重构（即不是新增功能，也不是修改bug的代码变动）
 * test：增加测试
 * chore：构建过程或辅助工具的变动
*/

conventional-changelog

自动生成 CHANGELOG

1
npm install conventional-changelog conventional-changelog-cli --save-dev

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "scripts": {
    "start": "concurrently \"node scripts/start.js\" \"npm run mock\"",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "eslint": "eslint --fix **/*.js",
    "prettier": "prettier --write ./src/**/**/**/*",
    "mock": "json-server --watch db.json --port 3004",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{jsx,txs,ts,js,json,css,md}": [
      "prettier --write ./src/**/**/**/*",
      "eslint --fix **/*.js",
      "git add"
    ]
  },
  "config": {
    "commitizen": {
      "path": "cz-customizable"
    }
  },    
}

commit&push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 当有新的改变
git add .

# 提交，输入不规范的提交信息，先校验代码， 提示不规范，并且不通过
git commit -m "test"

# 输入规范信息，规范自行百度，也可以从 commitlint.config.js中看出。运行钩子自动prettier，接着运行 eslint,没有报错则 git add，并开始校验提交信息是否规范，无误后顺利提交
git commit -m "feat: add semi-automatic construction"
husky > pre-commit (node v10.15.3)
Stashing changes... [started]
Stashing changes... [skipped]
→ No partially staged files found...
Running tasks... [started]
Running tasks for src/**/*.{jsx,txs,ts,js,json,css,md} [started]
prettier --write ./src/**/**/**/* [started]
prettier --write ./src/**/**/**/* [completed]
eslint --fix **/*.js [started]
eslint --fix **/*.js [completed]
git add [started]
git add [completed]
Running tasks for src/**/*.{jsx,txs,ts,js,json,css,md} [completed]
Running tasks... [completed]
husky > commit-msg (node v10.15.3)
[master 9afdd76] test: lint-staged
 1 file changed, 1 insertion(+)
 
# 推送到 orgin
git push

# 生成 changelog
npm run changelog
> conventional-changelog -p angular -i CHANGELOG.md -s -r 0

CSS样式顺序

相关属性应该为一组，可以以下面的样式为编写顺序

  • Positioning
  • Box model
  • Typographic
  • Visual
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.declaration-order{
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;    
    /* Box model */
    display:block;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #666;
    border-radius: 5px;
    margin: 10px;
    float: right;
    overflow: hidden;
    /* Typographic */
    font: normal 12px 'Helvetica Neue',sans-serif;
    line-height: 1.5;
    text-align: center;
    /* Visual */
    background-color: #333;
    color: #fff;
    opacity: 0.8;
    /* Other */
    cursor: pointer;
}

参考链接：

  1. 编写「可读」代码的实践
  2. 前端开发规范之命名规范、html规范、css规范、js规范
  3. Prettier
  4. eslint
  5. airbnb规范
  6. eslint-plugin-react
  7. eslint-config-alloy
  8. eslint-plugin-jsx-a11y
  9. husky
  10. lint-staged
  11. commitlint
0%