编码规范，美女帅哥进来看！主打一个全面！

DESIRE
82 阅读3分钟

为什么要有代码规范？

关于为什么要有代码规范，虚的咱不说，在我看来就两点：一个避免自己看着闹心，二是团队合作的时候怕被人蛐蛐🦗（这谁的代码 怎么写的和粑粑一样（不是））

eslint和prettier 的作用

想好了为啥要搞这规范，那就开始上手整吧，朋友们。 在这方面 这哥俩可以说是拔得头筹（我认为），接下来给哥几个介绍一下这小哥俩，掌声有请ESLINT\color{red}{E S L I N T} and PRETTIER\color{red}{P R E T T I E R} ~~~~~

真传一句话，假传万卷书！

eslint: 通过配置制定代码规范，不符合时给出警告或者报错。（也就是规范你，提示你的）
prettier: 通过配置帮你自动把代码格式化成符合规范的。（帮你格式化的）

eslint和prettier 的配置

知道了用处，接下来就要知道要怎么用了！

eslint安装

分为两种情况：

  1. 在初始化项目时会让你选择：

image.png

2.已有的项目里添加eslint:

终端执行 npm install -g eslint # -g

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"
  }
};

接下来当你的代码不符合你配置的规范时 就会报错或者给出警告 然而当你觉得对于爆出的错误 或 警告 是你不想遵守的 那你可以这样做。

image.png 看到图片中就爆出了一个eslint的错误， 圈出来的就是被配置的规范 你可以复制此处的属性 去.eslintrc.js文件的rules里面 把它关闭 例如： quotes: off.

eslint结语

eslint的作用、如何安装、以及如何配置和修改配置项 就已经全部完成， 本文提供的配置项是很基础的，更为详细的请大家去官网查询，下面是官网地址~
配置文件 - ESLint 中文网 (nodejs.cn)

prettier安装

直接在编辑器中 比如我用vscode 直接在插件安装功能里 搜索prettier 点击安装 就ok了

image.png

prettier配置

在项目根目录下新建 .prettierrc文件（注意：就是没有后缀哦\color{red}{注意： 就是没有后缀哦}）

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

等等，有没有觉得配置是配置了，但不知道怎么用啊！别急，咱们在浅动一手，让它以后都实现自动化修复格式，首先，打开 VSCode 《设置面板》

image.png

在设置中，搜索 save ，勾选 Format On Save

image.png

一套操作下来，即可实现代码自动化格式化

prettier结语

这是最基础的简单配置哈 有别的具体需求 移步prettier文档 应有尽有呐~ Prettier 中文网 (nodejs.cn)

关于eslint和prettier的冲突

eslint呢要求方法名和后面的括号之间要有一个空格， 而prettier呢 格式化时会默认把空格去掉 这个冲突就会导致报错 解决方案也很简单 打开.eslintrc.js 配置文件，2. 在 rules 规则下，新增一条规则：

'space-before-function-paren': 'off'

然后重启项目 冲突完美解决 撒花~

avatar
文章
阅读
粉丝