【一听就懂】eslint+prettier检查和修复代码

2022年1月11号会完成视频录制，敬请期待！

0.工具介绍

• eslint 是两个东西：
  • eslint包，用来在编译时做语法检查
  • eslint扩展工具，是vscode的扩展，打开代码时直接检查语法规范并报错
  • 两个工具都可以 用来修复代码规范错误
• prettier 是格式化工具，在 vue脚手架项目中，作为 vuter 扩展工具的插件，结合 eslint 扩展工具 来 检查语法 和 格式化修复代码

1.eslint

• 官网：https://eslint.bootcss.com/
• 作用：对 js 语法规范 做 检查 和 修复
• 检查时机：
  • 单独通过 eslint 命令 来检查
  • 通过 脚手架 调用 eslint 来检查

1.1 检查工具

• eslint 包 （通过 npm/yarn 或者 Vue/cli 下载安装的）

• vscode eslint扩展插件 （通过vscode 搜索下载的扩展插件）

1.2 通过 eslint 包做检查

1.2.1 通过 eslint包检查

• 运行 eslint包程序，并传入 要检查的文件路径

  • 命令1: ./node_modules/.bin/eslint yourfile.js

  • 命令2: npx eslint yourfile.js

    npx 会去 ./node_modules/.bin 里去找到并运行 eslint 脚本文件

• 通过 eslint包 做代码修复

  • 命令1: ./node_modules/.bin/eslint yourfile.js --fix
  • 命令2: npx eslint yourfile.js --fix

• 图解：

1.2.2 通过 vue/cli调用eslint检查

• 通过 vue脚手架 检查 并 修复问题
  • 命令1：yarn lint
  • 命令2：npm run lint

1.2.3 同时修复.js和.vue

• eslint 本身只能处理 .js 文件，对于 .vue 文件处理不了
• 解决方案：
  • 通过 脚手架命令 yarn lint 同时 检查和修复 两种文件(.js/.vue)

2. vscode 插件实时检查

2.1 问题

真实开发时，我们每次打包编译代码前，先调用检查的命令太麻烦了 所以，运行 yarn serve 启动项目 或 yarn build编译项目时 vue脚手架会自动通过eslint对代码做语法检查

• 命令：yarn serve

  • 输出：报错
  • 注意：由于没有修复错误，项目无法继续编译并运行

想要项目正常运行，还得去修复错误！麻烦！想要保存代码时 就立即检查语法规范错误,并修复！

• 安装 eslint 扩展工具，每次 vscode 打开时，会自动启动一个 eslint扩展工具服务器 对文件代码 做语法规范检查，并提示错误消息

• 问题：默认情况下， eslint 扩展工具 只在页面提示错误！不会直接修复错误！
• 如果想用它 保存时 修复错误，需要配置 ↓

3.格式化时修复错误

• 显示和修复错误，需要两个 扩展插件+配置文件配合使用

3.1 eslint扩展 修复代码

• eslint 扩展工具 默认 只检查 规范问题，但 不修复

• 为它配置开启修复功能：

  • 去 vscode 配置文件中设置

• 代码：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}
复制代码

• 配置好后，再保存代码文件时，就会自动修复了！

• 问题： 只能修复 .js 文件，.vue 文件处理不了！

• 如果要处理 .vue 文件，就需要 使用 格式化插件了 ↓

3.2 vuter.prettier 修复代码

vscode 的 Prettier 扩展工具专门用来格式化代码，所它也可以根据规范来格式化修复代码

• 注意：此时，我们不需要单独安装它，因为 vetur 内置了 prettier

  如果已经单独安装了 Prettier，请禁用 或 卸载它,否则 会 影响 eslint 和 vetur 扩展的功能！

3.2.1 Vetur介绍

• 功能：

  • 对 .vue 文件 做 语法着色
  • 对 .vue 代码做格式化( 通过 第三方的 格式化器 来做代码格式化 )

• 什么时候做格式化呢？

  • 默认 是需要 右键菜单 格式化文档 来操作

• 设置 vscode 保存时 来格式化

3.2.2 格式化时修复错误

• 介绍：Vetur 内部模式使用 prettier 来格式化 .vue 文件 代码
• 注意：
  • 语法规范检查 用的是 eslint 语法规范包（airbnb/standard/google/...）
  • 对.vue 格式化的 用的是 prettier 工具自己的语法规范
  • 这样容易产生冲突（ prettiter 格式化后的 代码 不符合 eslint 的语法规范包，导致eslint报错）
• 解决方案：
  • 将 prettier 的语法规范 配置成 eslint 一致的规范！

3.2.3 prettier 规范配置

• 官网：prettier.io/docs/en/opt…

• 创建 配置文件 .prettierrc.js

• 配置 prettier规则：

  // 配置文件 -> .prettierrc.js
  module.exports = {
      // ------------------------最重要----------------------------
      // 最大长度80个字符
      printWidth: 80,
      // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
      singleQuote: true,
      // 行末分号, 默认true
      semi: false,
      // 尽可能使用尾随逗号（包括函数参数）,默认none,可选 none|es5|all
      // es5 包括es5中的数组、对象
      // all 包括函数对象等所有可选
      trailingComma: 'none',
      // ------------------------------------------------------------
      // 对象字面量的大括号间使用空格（默认true） { a:1 }
      bracketSpacing: true,
      // 箭头函数参数括号 默认avoid 可选 avoid| always
      // avoid 能省略括号的时候就省略 如x => x
      // always 总是有括号 如(x) => x
      arrowParens: 'always',
      // tab缩进大小,默认为2
      tabWidth: 2,
      // 使用tab缩进还是空格，默认false
      useTabs: false,
      // ------------------------------------------------------------
      // vue缩进脚本和样式
      vueIndentScriptAndStyle: false,
      // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
      insertPragma: false,
      // 行尾换行格式
      endOfLine: 'auto',
      // html空格敏感度
      htmlWhitespaceSensitivity: 'ignore',
      // jsx 中的 > 标签放在最后一行的末尾，而不是单独放在下一行 默认false
      // jsxBracketSameLine: true,
      // JSX双引号
      // jsxSingleQuote: false,
  };
  复制代码

大功告成，现在，项目 在打开代码文件后，会自动显示 规范错误 在保存代码时，可以自动格式化 并 修复代码错误啦~！