关于代码规范的一些东西

敲代码的小菜猪
404 阅读5分钟

写代码的时候进行一些质量和格式的校验：

  • EditorConfig 是用来抹平编辑器差异的，比如文件编码，锁进格式等
  • ESLint 关注于代码质量校验 和 代码格式校验
  • Prettier 只关注代码格式，也支持自动修复，规则和ESLint不同

提交时的校验： 以实现在提交的时候校验，保证错误的代码无法提交。

  • husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具
  • lint-staged：对 git 暂存区的代码，运行 linters 的工具

eslint+editconfig+prettier+husky：实现从编写到git提交过程进行代码规范

eslint

eslint是用来识别ECMAScript和js并且按照规则给出报告的代码检测工具，可以避免低级错误并且统一代码的风格，有效控制项目代码的质量。 作用和优势： 检查语法错误 避免低级bug （api语法错误、使用未定义变量） 统一团队代码风格 （单双引号 缩进空格数量） 确保代码遵循最佳实践 特点： 每一条检验规则独立 可以单独开启或者关闭 完全可配置，每一个规则都是插件并且可以引入插件或者添加自定义规则。

使用步骤：

  1. 安装： npm命令全局/局部安装： npm i -g eslint/npm i -D eslint
  2. 配置文件：eslint --init
  • 可配置对象：
  • Environments: 脚本的运行环境（nodejs,browser,commonjs...)
  • Globals:脚本需要额外访问的全局变量
  • Rules:检查规则以及对应的等级

eslint规则三种等级：

  • “off"/0: 关闭规则
  • “warn"/1:打开规则 视为警告，不影响退出码
  • “error"/2: 打开规则 视为错误，退出码为1

配置文件内容：

  • 指定解析器选项 parserOptions:

  • 默认情况支持ECMAScript5语法 可以手动设置启动对其他版本的支持

  • parserOptions:{

  • ecmaVersion: 支持的ECMAScript版本 默认支持3，5 可以指定6，7，8，9，10或者对应年份

  • sourceType: js文件加载模式 设置为script/module

  • ecmaFeatures:  想使用的额外的语言特性

    env:预定义的全局环境

  • plugins: 配置需要加载的第三方插件 （需要先安装插件）

  • extends: 配置基础规则 (rules中的规则是基于这个规则之上配置的 可以覆盖基础规则）

忽略检测规则：

  • 第一种方式：根目录创建.eslintgnore文件用来告诉eslint忽略掉哪些不需要检测的文件或者目录
  • 第二种方式：通过package.json设置需要忽略的检测对象 eg: “eslintIgnore": ["test.js"]

#开头的行被当作注释 不影响忽略模式 路径是相对于当前工作目录或者.eslintgonre的位置 ！开头的行是否定模式 重新包含一个之前被忽略的模式

... /eslint-disable/ 禁用全部规则 放在文件顶部 整个文件不会被检查 /eslint-disable no-alert,no-console/ 禁用某些规则

prettier

prettier是一个代码格式化工具 没有检查语法的能力，强制执行一致的代码展示格式。不管你代码里的样式风格是什么，prettier都会去掉，然后用统一固定的格式重新输出。 同理也有配置文件 可以去添加配置 vscode插件库有prettier的扩展插件，直接安装然后再配置一下自动保存格式化。 一些常用属性，其他可查阅官方文档： prettier.io/docs/en/opt…

prettier.png

解决eslint和prettier的冲突： 经常在配置eslint和prettier的时候回出现冲突，本质原因在于 eslint既负责了代码质量检测，又负责了一部分的格式美化工作,而格式化部分的部分规则和 prettier不兼容。 目前在用的解决方案就是 eslint-config-prettier + eslint-plugin-prettier。

  • eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则，所以要将它放在extends的最后面。可以去覆盖其他的配置。

  • eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力，其实也就是将prettier当作eslint的一个插件，如果有重合的部分按照prettier的规则来。即eslint使用pretter规则来格式化代码。

editorConfig

让编辑器读取配置文件来格式化代码,有助于跨多个编辑器和IDE使用时还可以保持一致的编码风格。 配置了editorconfig之后编辑器就按照配置来格式化代码，优先级高于编辑器默认的。 使用方法： 在当前根目录下添加.editorconfig文件 安装插件 全局/局部安装依赖包

editconfig常用属性 editconfig.png

husky和lint-staged:

husky是一个用来管理git hook的工具，git hook即在我们使用git提交代码的过程中会触发的钩子.lint-staged作用是过滤文件，只检测暂存区的文件，提升检测的速度。为了避免提交不规范的代码入库，每次提交代码的时候，可以对代码进行预提交检查(pre-commit)。husky 会在git commit的时候，调用 pre-commit 钩子，执行 lint-staged，如果代码不符合 prettier 配置的规则，会进行格式化；然后执行 eslint 的规则进行检查，如果有不符合规则且无法自动修复的，就会停止此次提交。

npm install --save-dev husky lint-staged //配置package.json: "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,vue}": [ "prettier --write ./src", "eslint --ext .vue,.js,.jsx --fix ./src", "git add" ] }

/** pre-commit钩子函数： 在键入提交信息前运行。检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，可以用 git commit --no-verify 来绕过这个环节。 pre-commit可以用来检查代码风格是否一致。

avatar
文章
阅读
粉丝