代码规范最佳实践

阅读数：3708次 最后更新:
字数统计: 1.7k字   |   阅读时长≈ 7分

eslint

  • npm i eslint -D 下载eslint，npx eslint --init初始化eslint，根据自己的想法来选择对应的选项，这里我是使用的eslint:recommended这个extends
  • 自行查阅eslint:recommended的规则，根据自己的需求在rules字段里面进一步定制化。

prettier

  • 上面我们使用了eslint来进行错误的检测以及修正错误，这里我们使用prettier来进行代码的格式的美化

  • 因为eslint和prettier的有些规则会发生冲突，我们使用eslint-config-prettier关闭所有不必要或可能与Prettier冲突的规则,请注意，此配置仅关闭规则，仅检测eslint配置文件中rules字段里面定义的规则

  • npm i eslint-config-prettier -D npm install --save-dev --save-exact prettier

    1
    2
    3
    4
    5
    6
    //.eslintrc.js
    module.exports = {
        extends: [
            //你的其他extends
            'prettier'],
    }

    检测冲突

    • npx eslint-config-prettier path/to/main.js ，把path/to/main.js 替换成以及存在的js文件即可，只需检查一个文件即可

  • 创建.prettierrc.js文件，在里面配置相应的option，具体的配置文件选项和option以及默认值请查阅option 配置文件

    这里给出一些.prettierrc.js的配置

    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // .prettierrc.js
     module.exports = {
       // 一行最多 100 字符
       printWidth: 100,
       // 使用 2 个空格缩进
       tabWidth: 2,
      // 不使用缩进符，而使用空格
       useTabs: false,
       // 行尾不需要有分号
      semi: false,
       // 使用单引号
       singleQuote: true,
       // 对象的 key 仅在必要时用引号
       quoteProps: 'as-needed',
       // jsx 不使用单引号，而使用双引号
       jsxSingleQuote: false,
       // 末尾需要有逗号
       trailingComma: 'all',
      // 大括号内的首尾需要空格
       bracketSpacing: true,
       // jsx 标签的反尖括号需要换行
       bracketSameLine: false,
       // 箭头函数，只有一个参数的时候，也需要括号
       arrowParens: 'always',
       // 每个文件格式化的范围是文件的全部内容
       rangeStart: 0,
       rangeEnd: Infinity,
       // 不需要写文件开头的 @prettier
       requirePragma: false,
       // 不需要自动在文件开头插入 @prettier
       insertPragma: false,
       // 使用默认的折行标准
       proseWrap: 'preserve',
       // 根据显示样式决定 html 要不要折行
       htmlWhitespaceSensitivity: 'css',
       // vue 文件中的 script 和 style 内不用缩进
       vueIndentScriptAndStyle: false,
       // 换行符使用 auto
       endOfLine: 'auto',
       // 格式化内嵌代码
       embeddedLanguageFormatting: 'auto',
     };

stylelint规范css

  • npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier

  • 因为我们项目中使用了prettier ，因此prettier可能会与stylelint的一些配置产生冲突，我们安装stylelint-config-prettier来避免冲突

  • 我们使用stylelint-config-rational-order来规范css的顺序，npm install --save-dev stylelint-order stylelint-config-rational-order，具体的顺序请查看官网

  • 使用stylelint-selector-no-empty来禁止空的选择器， npm install stylelint-selector-no-empty --save-dev

  • 我这里使用的是less，stylelint 只能lint *css文件,要安装 postcss-less 来lint less文件

    1
    npm i postcss-less -D

  • 使用stylelint 来lint *.less文件时，也要加上--custom-syntax postcss-less,例如下面的script：

    1
    2
    3
    "scripts": {
      "lint:css": "stylelint *.less src/*.less --fix  --custom-syntax postcss-less"
    },

  • 如果你使用的是scss，可以使用stylelint-scss,具体怎么使用官方参考文档

  • 下面是我的.stylelintrc.js的配置

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
33
34
35
36
37
//.stylelintrc.js
module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    // stylelint-config-rational-order里面内置了一套css的顺序，因此我们下面可以不用自定义order/properties-order了,当然你也可以自己配置
    "stylelint-config-rational-order",
  ],
  plugins: [
    "stylelint-selector-no-empty",
    // 因为上面使用了stylelint-config-rational-order，里面已经添加了stylelint-order
    // "stylelint-order",
  ],
  rules: {
    // 禁止空选择器
    "plugin/stylelint-selector-no-empty": true,
    "order/order": [
      // 排序 css 自定义变量 --variable 列在最前边
      ["custom-properties", "declarations"],
      {
        disableFix: true,
      },
    ],
    // "order/properties-order":[
    //     "position",
    //     "top",
    //     "right",
    //     "bottom",
    //     "left",
    //     "z-index",
    //     "display",
    //     "float",
    //     "width",
    //     "height"
    // ]
  },
}

规范commit

  • 使用commitizen来规范commit的提交

    npm install -D commitizen

    commitizen init cz-conventional-changelog --save-dev --save-exact

  • 之后可以使用npx cz 或者git cz 来commit

lint-staged来筛选提交的文件

  • 使用lint-staged最简单的方法是npx mrm@2 lint-staged,他会根据你上面配置的eslint，prettier等来帮你安装husky自动进行配置,然后进行配置,在package.json中会生成下面的配置文件，不过这里有点问题，这里需要把"postcss-less":"stylelint --fix",这一行换成"*.less": "stylelint --fix --custom-syntax postcss-less",即可。

    1
    2
    3
    4
    5
    6
    "lint-staged": {
      "*.js": "eslint  --fix",
      //"*.less": "stylelint --fix --custom-syntax postcss-less",
      "postcss-less":"stylelint --fix",
      "*.{js,css,md}": "prettier --write"
    }
  • image-20220428121352410

  • 这里他生成了一个.husky文件，当你进行commit的时候，他会执行npx lint-staged命令，之后会根据package.json文件中的lint-stage配置项进行筛选提交的文件，然后执行对应的命令，这样就可以保证我们每次提交之前都对文件进行格式化

筛选规范的commit

  • 尽管我们上面已经使用了commitizen 来规范commit，但是如果你没有使用npx cz 或者git cz 来提交commit ,而是直接使用git commit 来提交，也是能提交上去，这样就没有什么意义了，因此这里我们使用commitlint 来检查提交的commit，当你提交了不规范的commit时，他会阻止这次提交

    image-20220428141616365 

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

  • 在.husky文件夹下面创建一个commit-msg文件,增添以下内容，

1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no -- commitlint --edit $1

  • 项目根目录新建一个commitlint.config.js文件，添加以下内容

    1
    2
    3
    module.exports = {
        extends: ['@commitlint/config-conventional']
    }

之后你的每次提交都会检测commit是否规范

  • 在项目下面创建.prettierignore ,.eslintignore文件，在这两个文件中分别添加

    1
    commitlint.config.js

  • 不然eslint格式化的时候会报错

编辑器配置

  • 我们使用EditorConfig来帮助各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格

  • 下载插件EditorConfig for VS Code ，之后再项目根目录创建一个.editorconfig文件,将下面内容复制到该文件中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # https://editorconfig.org

    root = true

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

    [*.md]
    insert_final_newline = false
    trim_trailing_whitespace = false

建议

  1. 以上内容均只在node环境下实验，后面会陆续更新vue的配置，但是大体上都差不多，会多用到一些eslint或者prettier的plugin，其他内容基本没什么区别
  2. 这篇文章只是给你指引一个方向，文章里提到的那些东西都给出了相应的链接，希望大家多看官网，自己多实践一下

如果喜欢的话，那就点个赞叭🤞

  • 本文作者： leftover
  • 版权声明： 本文版权归leftover所有,如需转载清标明来源！

扫一扫，分享到微信

Related Issues not found

Please contact @left0ver to initialize the comment

本站总访问量4012次 | 本站访客数2790人