semi分号在项目中的实际应用与常见问题解析

又踩了个分号的坑，这次真是折腾够了

前几天在重构一个老项目的时候，遇到了一个特别有意思的问题。代码里到处都是分号，但偏偏有几处没写分号，导致打包工具直接报错。这里我踩了个坑，花了整整一个下午才搞明白原因。

先说解决方案吧：如果你用的是ESLint，可以直接在配置文件里加一条规则：semi: [2, "always"]，强制要求每行代码都必须加分号。不过这还不是最终方案，后面会详细讲。

事情是这样的，我们这个项目用了Babel转译，同时还启用了Prettier格式化代码。本来以为这两个工具配合起来挺和谐的，结果发现它们对分号的处理完全不一致。折腾了半天才发现问题出在这里。

三种方案对比，最后还是选了ESLint

当时我试了好几种方法：

• 第一种是手动给所有代码补上分号，听起来简单粗暴，但实际上根本不可能。我们项目的代码量太大，而且团队里有些同事习惯不加分号，统一改一遍太费劲了。
• 第二种是调整Babel配置，尝试让它忽略分号的问题。结果发现Babel压根不管语法检查，只负责转译，这条路走不通。
• 第三种就是用ESLint，结合Prettier一起用。后来试了下发现这才是正解，虽然配置起来稍微麻烦一点，但效果最好。

这里有个小插曲，一开始我以为只要在Prettier配置里加"semi": true就行了。结果发现Prettier只是格式化工具，它不会主动帮你检查代码规范，只能保证格式化的结果符合你的设置。也就是说，如果某个文件没被格式化过，Prettier是不会管它的。

核心代码就这几行，配好ESLint和Prettier

接下来是重点，怎么配置ESLint和Prettier，让它们和平共处。以下是完整的配置过程：

首先安装必要的依赖：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

然后创建或修改.eslintrc.js文件：

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 这个很重要，让ESLint和Prettier协同工作
  ],
  rules: {
    semi: [2, 'always'], // 强制加分号
    'prettier/prettier': [
      'error',
      {
        semi: true, // Prettier也强制加分号
        singleQuote: true,
        trailingComma: 'es5',
        printWidth: 80,
        tabWidth: 2,
      },
    ],
  },
};

接着，在项目根目录下创建.prettierrc文件：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

最后，为了让团队协作更方便，建议在package.json里加几个脚本命令：

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
  "format": "prettier --write "**/*.{js,jsx,ts,tsx,json,html,css}""
}

这样配置完之后，运行npm run lint:fix就能自动修复大部分分号问题了。当然，还是会有一些特殊情况需要手动调整，比如模板字符串里的换行逻辑。

踩坑提醒：这三点一定注意

在整个过程中，我总结了几个容易踩坑的地方：

• 不要同时用两个工具做同一件事。比如，Prettier已经负责格式化了，ESLint就不要再去管格式化相关的规则，否则容易冲突。
• 团队协作时要统一规则。即使你个人习惯不加分号，也要遵守团队的规范，不然代码合并时会很痛苦。
• 别忘了测试环境。有一次我改完配置后，本地跑得好好的，结果部署到测试环境就报错了，原因是CI/CD流程里没有装Prettier。

还有一个小问题到现在也没完全解决：有些第三方库的代码风格和我们的规范不一致，导致每次更新依赖后都要手动调一下。不过这个问题影响不大，暂时就这样吧。

以上是我踩坑后的总结，欢迎评论区交流

总的来说，这次折腾让我对ESLint和Prettier的理解更深了一点。虽然花了不少时间，但也算是学到了新东西。如果你有更好的方案，或者遇到类似问题的其他解法，欢迎在评论区分享！