从0开始创建一个vue3的项目之三eslint与prettier自动格式化代码

吃颗栗子就睡觉
350 阅读7分钟

前言

嗨~ 友友们，前面我们已经完成了基础的依赖安装，接下来我们在正式开始撸代码之前，先来做一下前端代码规范的配置。

第一步：安装eslint

eslint是一个针对javascript语法检测的工具，执行它会检查我们的代码，或者配合使用vscode插件ESLint，它会直接在代码中提示错误信息，并可以在格式化代码的时候，去修复代码中部分错误。

npm install eslint --save-dev
第二步：初始化eslint

直接以下命令，进行eslint初始化

eslint --init

image.png

遇到了报错，还是同样的问题，node安装路径中不能包含空格的原因，这里解决方式还是按照之前提到过的解决方案进行解决，这里我建议小伙伴们将node进行重新安装到没有空格的文件目录下，避免像笔者一样多次解决同一个问题。

image.png 再次执行上面的命令，初始化eslint，成功啦！

这里我们选择第三项：检查语法，发现问题，并强制统一代码样式 image.png

项目模块类型选择，这里我们是做运行在浏览器端的前端项目，所以我们选择ESModule dbc893d2aeaf1ced201be3c333d28ff.png

框架选择，这里因为我们是想要搭建一个vue3.0的项目，所以我们选择Vue.js 7adfe178fb026fb7af8edc1908f847a.png

是否使用TypeScript，这里我们选择是，因为我们想要使用TypeScript，友友们可以根据自己的需求进行选择。

3f97cbbac065c8f12e0e4823d8543a8.png

代码运行在什么环境，这里根据我们的主题，我们选择Browser浏览器环境 6a7c58ffb370b7b9377f9f7f30f8912.png

项目代码风格，这里我们选择流行的代码风格，更好的利于和小伙伴们一起使用 bf824180b620684922199ff45eb40e6.png

Standard是开源社区的编码规范，它最大的特点是不用在语句的末尾添加分号;。详细文档入口 2503df45eb98297cabfed5aa4ce22bd.png

配置文件风格选择，这里笔者就选择Javascript d2274ce165e2488ba6a72924c3224a8.png

依赖安装方式，因为笔者这边都是使用的npm，大家可以根据自己的习惯进行选择。 2b04f3d5bf2fc841e1601646f6695cb.png

回车之后就进行依赖的安装啦，安装好了之后看到success的关键字，就意味着我们的eslint已经完成初始化了，并在文件目录中生成了.eslintrc.cjs的文件 image.png

第三步：配置eslint

tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项，它是存在于TypeScript的跟项目中的，所以这里我们需要在eslint的配置文件.eslintrc.cjs中引入tsconfig.json

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    // 增加对jsx的支持
    ecmaFeatures: {
      "jsx": true
    },
    // 引用tsconfig
    project: ['./tsconfig.json']
  },
  plugins: [
    'vue',
  ],
  rules: {
    // 关闭对三斜线注释 的语法校验。这里因为vue-tsc可以验证 ts + Vue Template 中的类型（基于 Volar）
    '@typescript-eslint/triple-slash-reference': 'off'
  }
}
第四步：配置eslint脚本命令

注意，使用Eslint的自动修复脚本命令只能修复部分格式问题，涉及除格式外其它代码规范问题需要手动修复。附件：代码规范详细说明

// package.json->scripts
"lint": "eslint --ext .vue,.ts src/",
// 自动修复 ESLint 问题脚本命令
"lint:fix": "eslint --ext .vue,.ts src/ --fix"
第五步：VScode安装ESLint插件

在vscode中安装插件ESLint

image.png

安装之后，可能需要重启vscode插件才可以生效，接着在vscode中按下F1，并在输入框中输入fix，就能看到如下图命令ESLint: Fix all auto-fixable Problems，点击后将按照之前的eslint配置进行代码格式化。与第四步的区别是，使用插件命令只会格式化当前文件，而使用npm run lint:fix会将整个项目的代码格式化，这是我们不想看到的，不是吗。

输入fix后如下图，在命令的最右边有一个设置按钮，可以在设置中配置快捷键，通过快捷键进行代码格式化。

（注意：在ESlint中内置安装的Standard代码格式规范，使用ESlint插件进行自动格式化，若是单独安装,则需要安装插件StandardJS - JavaScript Standard Style进行代码格式化）附加具体配置链接

image.png

第六步：安装Prettier以及Prettier - Code formatter插件

由于ESlint只能针对Javascript语法进行校验，那么在我们这个糅合了多种高端编码语言的项目中，显然是不太够的，这个时候，就来给大家介绍另一个开发小助手--Prettier，Prettier是一个代码美化的工具，它可以美化多种代码格式，JavaScript · TypeScript · JSON · SCSS · Less · HTML · Vue 等多种编程语言，它只负责代码的美化而不会对代码进行校验并给出警告。所以，大部分开发者都喜欢将ESLint与Prettier结合使用，不过二者同时使用会存在一些冲突，开发者可根据偏好去选择。

// 安装prettier
npm install prettier -D --save-exact

// 安装
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

我们首先安装一下prettier本地依赖，这里推荐两个插件，eslint-config-prettier和eslint-plugin-prettier，eslint-config-prettier的作用关闭所有和 Prettier 冲突的 ESLint 的配置，eslint-plugin-prettier的作用是作为ESLint规则运行prettier，并报告不同的ESLint问题。即你可以看到格式报错的来源是prettier还是ESlint，安装好这两个插件之后，在.eslintrc.cjs中进行配置，这里注意需要将prettier的插件加在最后一位。

extends: ['plugin:prettier/recommended'],

然后，在vscode插件市场中安装Prettier - Code formatter插件。

image.png

就可以右击使用……格式化文档，选择Prettier - Code formatter后就可以完成格式化了。 image.png

但是因为插件采取的是以prettier的规则格式化的，这里跟笔者的开发习惯不太一致，于是她决定逆天改命，扭转乾坤……好的，扯远了，我们一起来探讨一下怎么根据爱好进行部分调整吧。

首先创建一个.prettierrc.cjs文件，并配置你想调整的风格。

// .prettierrc.cjs
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 末尾需要有逗号
  trailingComma: 'none',
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'avoid',
  endOfLine: 'auto'
}

然后在.eslintrc.cjs的rules配置规则，详细参照下面文档

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:vue/vue3-essential', 'standard-with-typescript', 'plugin:prettier/recommended'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    // 增加对jsx的支持
    ecmaFeatures: {
      jsx: true
    },
    // 引用tsconfig
    project: ['./tsconfig.json']
  },
  plugins: ['vue'],
  rules: {
    // 关闭对三斜线注释 的语法校验。这里因为vue-tsc可以验证 ts + Vue Template 中的类型（基于 Volar）
    '@typescript-eslint/triple-slash-reference': 'off',
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        singleQuote: true,
        semi: false,
        trailingComma: 'none',
        arrowParens: 'avoid',
        endOfLine: 'auto'
      }
    ]
  }
}
补充

题外补充两个概念：

EditorConfig帮助跨各种编辑器和ide在同一个项目上工作的多个开发人员维护一致的编码风格。比如windows和Mac的换行符编码就不同，在vscode使用需要安装vscode插件EditorConfig for VS Code，这里有一份配置大家可以参考一下 附加：文档链接

// .editorconfig
root = true

[*]
charset = utf-8
// 缩进风格
indent_style = space
indent_size = 2
// 行尾结束符
end_of_line = crlf
// 插入最后换行符
insert_final_newline = true
// 清除行尾空格
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

Husky是一个协助Git提交代码的工具，可以在提交代码之前配置eslint的语法校验，帮助团队更好的工作以及代码规范。 附加：文档链接

结尾

本文和友友们分享了如何快速实现代码规范校验以及自动格式化代码，ESlint负责JavaScript代码的语法与质量校验，prettier负责美化代码。友友们，最近大家应该都从不同的消息渠道感受到了行业的压力，希望我们不负初心，砥砺前行，不要被焦虑奴役。

avatar
文章
阅读
粉丝