专栏首页Nian糕的私人厨房JavaScript 代码风格检测

JavaScript 代码风格检测

Unsplash

在日常开发中,每个人的代码编写习惯都不尽相同,比如有的人喜欢在代码末尾加上分号,而有的人不喜欢加,在个人开发的项目中这并不是什么严重问题。但在团队协作开发时,我们往往需要阅读其他人所写的代码,此时没有一个统一完整的代码规范,无法有效的控制代码质量,进而影响团队的开发效率。通过引入代码规范工具,可以帮助我们保障一个团队的代码风格相同,并且能能避免一些因为格式上的问题,而出现的低级错误

在新建 Vue 项目过程中,我通常会勾选 ESLint + Prettier 作为项目的语法检查方式,Prettier 是业界主流的代码风格格式化工具,不仅支持多种主流语言,还提供了各大 IDE 和编辑器插件,能够根据用户所配置的规则,重新打印出符合格式规范的代码,或许大家已经注意到,ESLint 也具有语法风格检查功能,既然如此,为何还要引入 Prettier 呢?

确实在代码格式化方面,Prettier 和 ESLint 有所重叠,不过它们的侧重点不同,ESLint 的主要工作就是检测出代码中的潜在问题,并给出相应的提示,比如使用了某个变量却忘记定义,在格式化功能上却很有限,我们来看下面这个例子

methods: {
    say() {
        let number = 1;
    }

}

通过 ESLint 的检查,可以检测到:① number 为常量,应该使用 const 进行声明;② number 在声明之后没有使用。这就是 ESLInt 能为我们所做的所有事情,对于倒数第二行的空行,就显得心有余而力不足了,这时候就轮到 Prettier 登场了,Prettier 能够在我们保存代码时,自动删除倒数第二行的空行。所以,ESLint 主要还是负责校验代码是否符合规范,而代码的风格则由 Prettier 进行调整,两者分工不同,需要配合使用

既然我们已经了解到 ESLint 和 Prettier 各自的优势了,那又该如何使用?或许有同学会有疑问,在项目初始化的时候,不是已经引入这两个 Node 模块了吗?直接使用不就可以了吗?确实如此,代码格式错误的提醒、代码格式处理确实能通过 npm 或者通过 webpack 打包的时候去操作,但这里建议大家通过 IDE 或编辑器去操作,这样会比较方便,接下来的步骤会比较繁琐,需要大家按照顺序并细心做好每一步

01 配合 VS Code 插件使用

这里只介绍 VS Code 的配置方法,而使用 IDE 和其他编辑器的同学可参考并自行配置,首先打开 VS Code 的插件市场,搜索并安装以下插件——Vetur、ESLint、Prettier-Code formatter,待安装完成之后,重启下 VS Code 避免插件不生效

Vetur 插件除了支持 .vue 文件语法高亮、语法补全之外,其默认代码风格化使用的是 Prettier,我们只需要按一下快捷键 Shift + Option + F(Win 快捷键为Shift + Alt + F)即可快速格式化代码

除此之外,我们还可以通过快捷键 Command + ,(Win 快捷键为 Ctrl + ,)开启 VS Code 的 setting.json 文件,搜索 editor.formatOnSave 配置项,将其取值改为 true,就能在保存的时候进行自动排版了

ESLint 插件和 Prettier 插件会自动检索项目根目录下的 .eslintrc.js 文件和 .prettierrc.js 文件,根据配置文件里的规则设置进行代码检查,而这两个文件的基础配置 Vue-Cli 3 已经帮我们配置好了,我们需要做的,就是依据自己的代码风格,在配置文件中添加相应的规则

02 规则配置

ESLint 的配置多达上百条,为了方便大家更容易的配置出自己心目中的规则,建议大家参考腾讯 AlloyTeam 团队的 ESLint 配置规则,打开 .eslintrc.js 文件,在 rules 里添加强制使用单引号和结尾不能使用分号两条规则,具体代码如下所示:

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    //强制使用单引号
    quotes: ["error", "single"],
    //强制不使用分号结尾
    semi: ["error", "never"]
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

随后我们打开 .prettierrc.js 文件,如果项目中没有该文件,在根目录新建一个即可,随后添加使用单引号和结尾不加分号两条规则,具体代码如下所示:

// .prettierrc.js
module.exports = {
  //使用单引号
  singleQuote: true,
  //结尾不加分号
  semi: false
}

规则修改之后,如果项目正在运行,记得重新 npm run serve 一下,或许大家已经注意到了,我们在 ESLint 中定义的规则是强制使用单引号,而 Prettier 格式化的时候,会将所有单引号转换为双引号,这就和 ESlint 定义的校验规则冲突了

解决的方法也很简单,那就是把 ESLint 的规则配置里也配置和 Prettier 相同的规则,而更好的做法是,不需要在 ESLint 里设置风格化的规则,全都交给 Prettier 去做

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery 动态绑定

    这是在项目过程中所遇到的一个问题,给 JS 动态生成的元素绑定事件失效,代码如下所示:

    Nian糕
  • Emmet 常用语法

    Emmet 是一个能大幅度提高前端开发效率的一个工具,通过在编辑器中输入 HTML 或 CSS 的代码缩写,按 Tab 键即可拓展为完整的代码片段,本文主要...

    Nian糕
  • 腾讯课堂 IMWeb 七天前端求职提升营 Day 2

    本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中,所推送的面试题目及编程练习的一次汇总,期间还包括三次直播课的分享,均由腾讯导师给大家讲解,该系列博...

    Nian糕
  • Leetcode 239. Sliding Window Maximum

    Given an array nums, there is a sliding window of size k which is moving from t...

    triplebee
  • 手把手教你编写叮当机器人插件

    HaHack
  • 优酷iOS插件化页面架构方法

    随着业务不停地迭代,优酷 APP 用于分发视频资源的 UI 控件越写越多,也越来越复杂,并且同时相似相近的代码也非常多。仔细研究之后,发现是很多耦合导致的问题:

    ios-lan
  • 【Flutter桌面篇】Flutter&Windows应用尝鲜

    张风捷特烈
  • DDOS Deflate防轻型DDOS***

    DDoS deflate是一款免费的用来防御和减轻DDoS***的脚本。它通过netstat监测跟踪创建大量网络连接的IP地址,在检测到某个结点超过预设的限 ...

    三杯水Plus
  • React Hooks 深入系列

    在 class 已经融入 React 生态的节点下, React 推出的 Hooks 具有如下优势:

    牧云云
  • 使用react-navigation动态改变当前状态栏title

    十里桃花舞丶

扫码关注云+社区

领取腾讯云代金券