我正在参加「掘金·启航计划」 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言

这里的非常规指的是，不是使用 Vue Cli 这种工具包去创建的项目，或者创建了但是没有加上 ESlint 的配置，比如下面这个

"dependencies": {
  "ant-design-vue": "^3.2.13",
  "axios": "^1.1.2",
  "core-js": "^3.8.3",
  "vue": "^3.2.13",
  "vue-router": "^4.0.3",
  "vuex": "^4.0.0"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-router": "~5.0.0",
  "@vue/cli-plugin-vuex": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
},

本篇文章不涉及 typescript 的配置

ESlint

ESlint 的配置需要安装以下包

npm install --save-dev eslint eslint-plugin-vue

ESlint 不必多说，eslint-plugin-vue 这个包请看文档，作用如下

This plugin allows us to check the <template> and <script> of .vue files with ESLint, as well as Vue code in .js files.

再创建 ESLint 的配置文件 .eslintrc.js

module.exports = {
  extends: ["plugin:vue/vue3-recommended"],
};

关于 eslint-config-vue 的配置选项可以参考文档

完成上面的操作后可以看到项目的 ESlint 已经生效了

Prettier

对于格式化，有些公司会采用 ESLint 去格式化，或者自动保存的时候去 ESlint 一下，但对于某些场景 ESlint 格式化不太好用，比如标签长度超过编辑器默认最大长度（120 个字符），ESlint 做不到自动换行和属性自动排列，所以格式化我选择 Prettier，而且我目前最常用的 IDE - webstorm 的默认格式化也是采用的 Prettier

Prettier 的配置需要安装以下包

npm install --save-dev prettier eslint-config-prettier

eslint-config-prettier 这个库主要是用来解决和 eslint 的冲突，主要表现在你使用 IDE 的格式化快捷键之后会报一堆 ESLint 格式错误，参考文档

安装之后需要在 eslint 配置文件 .eslintrc.js 中加入下列语句

module.exports = {
  // ...
  extends: ["plugin:vue/vue3-recommended", "prettier"],
  // ...
};

使用 Prettier 格式化需要分 IDE 来讲

WebStorm

WebStorm 的 windows 格式化快捷键是 Ctrl + Alt + L 默认使用的格式化包就是 Prettier，如果是只使用 ESLint 管理项目规范，很容易就有代码不一冲突，因为 ESLint 并不会对代码格式化做强制要求，但项目组每个人的写法可能很不一样，这时候 Commit 时就会很多冲突需要提交，类似下面这段代码，ESLint 是不会做任何修改的

  methods: {
    fun() {
      const type = ["string", "number", "undefined", "symbol", "boolean", "bigint", "null"];
    }
  }

但是 Prettier 会强制换行

methods: {
    fun() {
      const type = [
        "string",
        "number",
        "undefined",
        "symbol",
        "boolean",
        "bigint",
        "null",
      ];
    },
  },

诸如此类的细节还有很多，处理冲突时总是很麻烦，所以需要加入 Prettier 管理规范

下面是 WebStorm 配置 Prettier 的操作

安装插件

去 WebStorm 的插件市场下载 Prettier 插件

配置 Prettier 库的位置

文件 -> 设置 -> 语言和框架 -> Prettier 下拉选择你项目的 Prettier（注意是项目而不是全局的 Prettier ！！！）

检查是否生效

1. 使用 Prettier 插件快捷键格式化项目某一文件
   1. 文件 -> 设置 -> 键盘映射 -> 搜索 prettier，即可看到对应的快捷键映射
2. 基于命令行终端 Prettier 格式化
3. 检查两种格式化是否一致

如何使用终端的 Prettier?

npx prettier --write your-file-path

注意不要用到全局的 Prettier 而是项目的 Prettier ！！！

NOTE: 可以通过查看 Prettier 版本来判断

# 全局安装的 Prettier 版本查看
prettier -v
# 项目的 Prettier 版本查看
npx prettier -v

注意

WebStorm 的 Prettier 格式化快捷键和 IDE 默认的快捷键不同

1. 默认: Ctrl + Alt + L
2. Prettier: Ctrl + Alt + Shift + P

有可能快捷键无效，可能原因有两种

1. 和运行中的某个软件有热键冲突
2. Prettier 没找到项目的包（也就是上面说的配置 Prettier 库的位置的操作）

下面是 VS Code 配置 Prettier 的操作

VS Code

安装插件

配置默认格式化

检查是否生效

1. 使用 Prettier 插件快捷键格式化项目某一文件
2. 基于命令行终端 Prettier 格式化
3. 检查两种格式化是否一致

VS Code 配置 Prettier 的好处是会自动检索项目的 Prettier 包的位置，而不是像 WebStorm 一样要自己去添加