代码格式化工具哪个好(代码怎么格式化对齐)

多人项目合作,要考虑代码编写的一致性,这样后期维护起来更加方便,顺便也能养成好的编码习惯。

Vue3 + TypeScript + ESLint + Prettier + Husky + LintStaged
代码风格的统一,我分成两部分来配置。
一部分是开发时,要养成良好的开发习惯,另一部分就是在提交代码到仓库的时候,做一层 Lint 校验。
注:本文不讨论末尾是否应该增加「分号」。
文章分两部分说。
首先是增加了 .eslintrc.js 和 .prettierrc 和 .vsocode/settings.json 三个文件。
.eslintrc.js 文件目的是为了检查当前的代码是否规范;
  • 通过配置 .eslintignore 来配置哪些文件不需要经过 ESLint 检查;

  • 可以在具体的文件中,设置特定的代码规则,也可以用来跳过某些语句;

  • /* eslint-disable */ 一行代码跳过当前文件的 ESLint 检测,

  • ESLint 的生效规则是就近原则,如果在同一目录中有多个配置文件,ESLint将只使用一个。

ESLint 生效规则的优先顺序是:
  • .eslintrc.js

  • .eslintrc.yaml

  • .eslintrc.yml

  • .eslintrc.json

  • .eslintrc

  • package.json

贴一下我 .eslintrc.js 文件内容
module.exports = {  root: true,  env: {    node: true  },  extends: [\\\'plugin:vue/vue3-essential\\\', \\\'@vue/airbnb\\\', \\\'@vue/typescript/recommended\\\'],  parserOptions: {    ecmaVersion: 2020  },  // 注:每次更新了 rules 规则,都要重新启动项目 ~~~  rules: {    quotes: [\\\'warn\\\', \\\'single\\\'], // html属性用的是「双引号」,TS里引号用「单引号」    semi: [\\\'warn\\\', \\\'never\\\'], // 结尾的「分号不加」切记:([/+-     这五种符号不可以在行首    indent: [\\\'error\\\', \\\'tab\\\'], // 缩进是 tab    ...  }}
.prettierrc 文件目的是为了美化当前的文件;
{  \\\"tabWidth\\\": 4,  \\\"useTabs\\\": true,  \\\"semi\\\": false,  \\\"singleQuote\\\": true,  \\\"trailingComma\\\": \\\"none\\\",  \\\"bracketSpacing\\\": true,  \\\"arrowParens\\\": \\\"always\\\",  \\\"printWidth\\\": 120}
这个文件有两个用处,在编辑器点击保存的时候自动格式化代码,在提交代码 commit 的时候格式化代码的风格都是依据这个文件。
先说第一种用处,我用的是 VSCode 编辑器,通过根目录 .vscode 来配置项目。先在 VSCode 应用商店里增加 Prettier 插件,然后在  .vscode/setting.json 文件里直接配置让 VSCode 来遵循 .prettierrc 的规则。
.vscode/settings.json 文件是为了在自动保存的时候,把代码美化成 prettierrc 里面的样式:
{  \\\"editor.formatOnType\\\": true,  \\\"editor.formatOnSave\\\": true, // 保存格式化代码  //下面是格式化代码的遵循的条件,下面三种文件根据 prettier 来格式化  \\\"[typescript]\\\": {    \\\"editor.defaultFormatter\\\": \\\"esbenp.prettier-vscode\\\"  },  \\\"[javascript]\\\": {    \\\"editor.defaultFormatter\\\": \\\"esbenp.prettier-vscode\\\"  },  \\\"[json]\\\": {    \\\"editor.defaultFormatter\\\": \\\"esbenp.prettier-vscode\\\"  }}
为什么使用 .prettierrc 而不使用 standard ,是因为 vue-next 项目用了 .prettier 

,做这次的代码规范,参考的是 Vue3 源码项目 vue-next 。

按照上面的配置,基本上实现了「保存并格式化代码」功能了。
另一部分就是说,在 commit 代码的时候,做一层 Lint 校验,如何实现呢?分三块内容,Prettier 就不讲了,一个配置文件而已。
「Husky 添加 Git 钩子」「Prettier代码美化」「LintStaged只检测当前在暂存区的文件」
首先,我们可以根据官网来安装 Husky。
https://typicode.github.io/husky/#/
安装 husky 
npm install husky --save-dev
创建文件
npx husky install
添加一条命令在 package.json 里面
npm set-script prepare \\\"husky install”
在 package.json 里 scripts 中定义的任何脚本,只需创建另一个具有匹配名称的脚本,并将「pre」或「post」添加到它们的开头,拿 npm test 举例:
    pretesttestposttest
    这就是为什么要添加一条 prepare ,不过,我在项目中好像没用到,算课外知识吧。
    Tips:如果 set-script 加不上命令语句,就需要手动添加一条命令。
      // package.json{  \\\"scripts\\\": {    \\\"prepare\\\": \\\"husky install\\\"  }}
      然后创建个钩子
      npx husky add .husky/pre-commit \\\"npx lint-staged\\\"git add .husky/pre-commit
      执行 commit 看下效果
      git commit -m \\\"Keep calm and commit\\\"
      执行 pre-commit 文件的时候,就是在执行 npx lint-staged:
      #!/bin/sh. \\\"$(dirname \\\"$0\\\")/_/husky.sh\\\"
      npx lint-staged
      LintStaged 每次提交都检测暂存区的文件是否符合规范。
      在 package.json 里需要先增加两个配置,来配合 pre-commit 文件的执行:
      \\\"husky\\\": {    \\\"hooks\\\": {        \\\"pre-commit\\\": \\\"lint-staged\\\"    }},\\\"lint-staged\\\": {    \\\"*.{js,css,json,md,vue}\\\": [        \\\"prettier --write\\\",        \\\"git add\\\"    ]}
      如果报错:
      hint: The \\\'.husky/pre-commit\\\' hook was ignored because it\\\'s not set as executable.hint: You can disable this warning with `git config advice.ignoredHook false`.
      则执行
      chmod 700 .husky/pre-commit
      修改 shell 文件权限。
      如果报错:
      ? prettier --write [ENOENT]? prettier --write failed without output (ENOENT).
      需要安装
      npm install -D prettier
      最终会见到
      ? Preparing...? Running tasks...? Applying modifications...? Cleaning up...
      这样初步的配置就搞定了,在项目开发中,有两个维度可以美化代码。小伙伴的代码风格就会趋向于统一。

      参考文档:

      https://segmentfault.com/a/1190000017461203

      https://cloud.tencent.com/developer/section/1135570

      https://typicode.github.io/husky/#/

      https://pre-commit.com/

      https://github.com/okonet/lint-staged

      https://github.com/prettier/prettier

      图片授权基于 www.pixabay.com 相关协议

      原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34592.html

      Like (0)
      小道研究的头像小道研究
      Previous 2024年4月18日
      Next 2024年4月18日

      相关推荐

      发表回复

      您的邮箱地址不会被公开。 必填项已用 * 标注