代码规范最佳实践

最后更新: 2025-01-01

字数统计: 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的配置

// .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的配置

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

筛选规范的commit

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

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

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

#!/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文件,将下面内容复制到该文件中

# 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

建议

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

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

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