侧边栏壁纸
博主头像
xuesheng博主等级

分享web知识,学习就是取悦自己!

  • 累计撰写 118 篇文章
  • 累计创建 14 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

1、编程规范解决方案之ESLint + perttier

xuesheng
2020-06-18 / 0 评论 / 0 点赞 / 244 阅读 / 2,544 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-01-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

为什么需要编程规范?

对于一些大型的企业级项目而言,通常情况下我们都是一个团队来进行开发的。而又因为团队人员对技术理解上的参差不齐,所以就会导致出现一种情况,那就是《一个项目无法具备统一的编程规范,导致项目的代码像多个不同材质的补丁拼接起来一样》

比如:

有的地方有空格进行分割,有的地方却没有

有的地方是单引号,有的地方却是双引号

有的地方有分号,有的地方没有分号

....

为避免这个问题,所以需要规范

代码检测工具 ESLint

首先 ESLint2013年6月 创建的一个开源项目,它的目标非常简单,只有一个,那就是 提供一个插件化的 javascript 代码检测工具 ,说白了就是做 代码格式检测使用的

现代工程化项目中,有规范化的,都包含一个 .eslintrc.js 文件,这个文件就是 eslint 的配置文件。

或者在创建项目时,就进行过这样的选择:

? Pick a linter / formatter config: 
  ESLint with error prevention only // 仅包含错误的 ESLint
  ESLint + Airbnb config // Airbnb 的 ESLint 延伸规则
  ESLint + Standard config // 标准的 ESLint 规则

标准的 ESLint 规则.eslintrc.js 文件

// ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象
// 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  // 表示当前目录即为根目录,ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: ["plugin:vue/vue3-essential", "@vue/standard"],
  // 解析器
  parserOptions: {
    parser: "babel-eslint"
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
   * 错误级别分为三种:
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
   * "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
   */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

对比.eslintrc.js 文件,基于 ESLint 如果我们出现不符合规范的代码格式时,那么就会得到一个对应的错误。

比如:
image20210904185336318.png

这个错误表示:

  1. 此时我们触发了一个 《错误级别的错误》
  2. 触发该错误的位置是 在 Home.vue 的第 13 行 第九列 中
  3. 错误描述为:字符串必须使用单引号
  4. 错误规则为:quotes

那么想要解决这个错误,通常情况下我们有两种方式:

  1. 按照 ESLint 的要求修改代码
  2. 修改 ESLint 的验证规则

按照 ESLint 的要求修改代码:

Home.vue 的第 13 行中把双引号改为单引号

修改 ESLint 的验证规则:

  1. .eslintrc.js 文件中,新增一条验证规则
"quotes": "error" // 默认
"quotes": "warn" // 修改为警告
"quotes": "off" // 修改不校验

ESLint 与 代码保存格式化Prettier

(https://www.prettier.cn/) prettier 中文官网!)

prettier 是什么?

  1. 一个代码格式化工具
  2. 开箱即用
  3. 可以直接集成到 VSCode 之中
  4. 在保存时,让代码直接符合 ESLint 标准(需要通过一些简单配置)

在vscode中使用

  1. VSCode 中安装 prettier 插件(搜索 prettier),这个插件可以帮助我们在配置 prettier 的时候获得提示
    image20210904195026475.png

  2. 在项目中新建 .prettierrc 文件,该文件为 perttier 默认配置文件

  3. 在该文件中写入如下配置:

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中,最后一行不加逗号
  "trailingComma": "none"
}
  1. 打开 VSCode 《设置面板》
    image20210904200638072.png

  2. 在设置中,搜索 save ,勾选 Format On Save
    image20210904200738067.png

至此,即可在 VSCode 保存时,自动格式化代码!

  1. VSCode 而言,默认一个 tab 等于 4 个空格,而 ESLint 希望一个 tab 为两个空格

  2. 如果 VSCode 安装了多个代码格式化工具

  3. ESLint 和 prettier 之间的冲突问题

比如:
image20210904201057594.png

这个错误的意思是说:created 这个方法名和后面的小括号之间,应该有一个空格!

但是当我们加入了这个空格之后,只要一保存代码,就会发现 prettier 会自动帮助我们去除掉这个空格。

那么此时的这个问题就是 prettierESLint 的冲突问题。

针对于这个问题我们想要解决也非常简单:

  1. 打开 .eslintrc.js 配置文件

  2. rules 规则下,新增一条规则

'space-before-function-paren': 'off'
  1. 该规则表示关闭《方法名后增加空格》的规则

至此整个的 perttierESLint 的配合使用就算是全部完成了。

在之后我们写代码的过程中,只需要保存代码,那么 perttier 就会帮助我们自动格式化代码,使其符合 ESLint 的校验规则。而无需我们手动进行更改了。

0

评论区