Vue2.x - 标准化项目创建 + ESLint&Prettier设置 + VSCode插件推荐

柔光的暖阳◎ 2023-09-28 12:27 9阅读 0赞

**目录**

摘要

初始化一个标准化的Vue项目

执行vue create

手动选择项目特性

选择Vue项目必要的插件Vue Router

选择项目为vue2.x版本

不选择history模式的前端路由（即选择hash模式）

选择standard ESLint来规范项目代码

让ESLint在代码保存时工作

选择将ESLint，Babel等插件的配置放在单独的文件中

将上述设置保存为预设

执行vue ui

安装elementUI组件库插件

ESLint设置

什么是ESLint

ESLint第三方包和VSCode的ESLint插件

Prettier设置

什么是Prettier

Prettier与ESLint插件之间的冲突

.prettierrc.js

适用于vue项目的VSCode插件推荐

Vetur

VueHelper

编辑

Auto Close Tag

Auto Rename Tag

--------------------

## 摘要 ##

目前，我们已经学习完了Vue2.x全家桶的知识

[Vue2.x - 核心\_伏城之外的博客-CSDN博客\_vue 核心][Vue2.x - _-CSDN_vue]

[Vue2.x - 组件化编程\_伏城之外的博客-CSDN博客][Vue2.x - _-CSDN]

[Vue2.x - Vuex\_伏城之外的博客-CSDN博客\_vue2.x vuex][Vue2.x - Vuex_-CSDN_vue2.x vuex]

[Vue2.x - Vue Router\_伏城之外的博客-CSDN博客][Vue2.x - Vue Router_-CSDN]

下面就是进行真实项目开发了，但是这之前，我们需要做两件事：

*  初始化一个标准化的Vue项目
 *  标准化的Vue项目代码编写（ESLint语法规范，以及Prettier格式化）

只有做到以上两个标准化，我们的Vue项目才能进行健康地，高效地开发。

## 初始化一个标准化的Vue项目 ##

### 执行vue create ###

vue create 项目名称

### 手动选择项目特性 ###

![ed8f2f6a18cb4bbf820df79befd717ae.png][]

### 选择Vue项目必要的插件Vue Router ###

![bd42d52e51244cc0ad1a750af141dc31.png][]

> vue create 创建出来的项目都是SPA项目，我们需要借助vue-router实现前端路由，所以这里我们一般要选择Router。
> 
> 当我们选择Router后，创建出来的项目就会自动安装vue-router，并且自动生成了路由模块，src/router/index.js，和生成了路由器实例，并将路由器实例交给了vm

### 选择项目为vue2.x版本 ###

![d391b47a5b05430d9a8a65b20c57e50c.png][]

### 不选择history模式的前端路由（即选择hash模式） ###

![f2b8aee087af4043bccdee6e9374c8a2.png][]

### 选择standard ESLint来规范项目代码 ###

![0a560c6dd64849eda315de8de28c96ac.png][]

### 让ESLint在代码保存时工作 ###

![4a9d24f52edc4506ab3820b6d8a83076.png][]

### 选择将ESLint，Babel等插件的配置放在单独的文件中 ###

![d7b09a04fc0a49faa79f793b6a6a094d.png][]

> 我们选择上述选项后，项目根目录下会自动创建一个 .eslintrc.js 文件，用于保存ESLint的配置

### 将上述设置保存为预设 ###

![4d7b133d2c3a4650b6db1e56abbdd0a5.png][]

![a7cb2b4a0e9845ab922909439bced153.png][]

> 保存为预设后，之后的vue create，第一步就可以选择到已保存的预设
> 
> ![816f3d91ed3741a9b65f042cdbc02348.png][] 此时，我们就可以创建一个相同设置的Vue项目，无需进行后续问答

### 执行vue ui ###

![b2ecf515342246d5a9e10ce164145e8c.png][]

手动import，我们之前创建的项目

### 安装elementUI组件库插件 ###

![1d6d26f49fc9436788e07985335c22f2.png][]![36c89ff947c3438bbd62e7de0a9f9128.png][]

![74f43cbe60cd4e5f96fd76e5b89bbce4.png][]

> 利用vue ui来安装elementUI组件库插件，并且选择“按需引入”，此时，Vue项目就会自动生成一个插件模块src/plugins/element.js，我们可以在element.js中按需引入elementUI组件。

###  ###

## ESLint设置 ##

### 什么是ESLint ###

ESLint是一种支持语法检查，支持代码风格检查的插件。

比如，我们在js文件中定义了一个未使用的变量，则eslint的语法检查会找到这个变量，并且报语法错误。

再比如，我们在js文件中两行代码之间空了很多行，此时eslint的代码风格检查会找到空出来的无用空行，并报错。

ESLint适用于多人协作开发的项目，它能够保证不同的开发者之间开发出风格一致的代码，以及避免低级的语法问题。

### ESLint第三方包和VSCode的ESLint插件 ###

我们需要在两个时机触发ESLint检查：

*  开发过程中
 *  编译或打包时

在开发过程中，我们希望每次保存代码就可以触发一次ESLint检查，来发现本次修改中的语法错误或者风格错误，这样可以避免错误的累积。

在编译或打包项目代码时，我们希望可以对项目整体代码进行一次ESLint检查，来保证编译或打包文件中没有语法错误或风格错误。

当我们按照前面标准化的方式创建Vue项目后，就已经在项目中安装了对应的ESLint包，并配置了ESLint的检查规则

![7e3f090489bf4c1096e52227b9cbd3d0.png][]

当我们打包或编译项目时，就会自动触发ESLint执行，并按照对应的检查规则（如@vue/eslint-config-standard）来审查代码。

![90166b099f7b44d3ae8123a414e84a9c.png][]

而开发过程中，我们只能借助于IDE工具的ESLint插件，来进行实时检查，比如我们可以在VSCode的插件库中下载 ESLint插件

![ebf8fd738c1c4e558acb00f0187df0c8.png][]

安装好后，我们保存文件后就会自动触发ESLint插件对于当前文件进行代码审查（需要注意的是最新的2.2.2版本的ESLint插件，不需要进行任何setting文件修改，VSCode已经默认在代码保存时，执行ESLint的语法和风格检查，并且自动修复错误）

![50ef395f1a3b4489aff896857fef4902.png][]

如下示例，ESLint standard规则中，是不允许拖尾逗号，不允许js中使用双引号，不允许js中使用分号的

![90fbc38b764c49c999a972b80af2832b.gif][]

当我们保存文件后，ESLint就会自动修复这些错误

![dbbeb41ebfa24d069f86ba53afcb9e91.gif][]

## Prettier设置 ##

### 什么是Prettier ###

Prettier是一种用于格式化各种代码（如下红框所示）的插件

![efd3440a3c9c4ac7be1bf2d46bfda396.png][]

所谓格式化，就是让代码从杂乱的风格，变成清晰的风格

![b9b94cff6676424ea79f4036d2f7cfc0.gif][]

如上例中，Vue组件中template标签中的HTML代码非常乱，当我们保存代码时，就会触发prettier对代码进行格式化。

> 如果保存代码不能触发prettier对代码进行格式，则ctrl+shift+p调用命令面板，然后选择下图红框选项
> 
> ![03672401e4304c799b1bb89af421bdec.png][]
> 
> 继续选择“配置默认格式化程序”
> 
> ![14ade4cee91749a289bf0c059fd41f88.png][]
> 
> 将Prettier设置为默认的格式化程序
> 
> ![a625624371d04326823a69c4c48ad096.png][]
> 
> 这样，在保存代码时，就会触发Prettier进行代码格式化了。

### Prettier与ESLint插件之间的冲突 ###

上面当我们保存代码时，Prettier不仅将Vue组件template标签中HTML代码格式化了，还将script标签中js代码也格式化了

![6f43276ccd47473d8799e94b60805362.png][]

但是Prettier格式化js代码的默认原则是：

*  使用双引号
 *  使用拖尾都好
 *  使用分号
 *  ...

而这些规则和ESLint的检查规则是冲突的，并且Prettier作为专业的格式化插件，它要比ESLint的错误修复的优先级更高。所以ESLint修复完这些错误就立即被Premitter给覆盖了。

此时的解决方案是，更改Premitter的格式化规则，让其适配ESLint。

### .prettierrc.js ###

我们需要项目根目录下创建一个文件.prettierrc.js，该文件将被识别为Prettier插件的格式化规则文件，Prettier会优先使用.prettierrc.js定义的规则

module.exports = {
      printWidth: 120, // 一行最多 120 字符(默认80)
      tabWidth: 2, // 每个tab相当于多少个空格（默认2）
      useTabs: false, // 是否使用tab进行缩进（默认false）
      semi: false, // 行尾需要有分号(默认true)
      singleQuote: true, // 使用单引号（默认false）
      quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
      jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
      trailingComma: 'none', // 多行使用拖尾逗号（默认none）
      bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"（默认true）
      jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
      htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
      arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid:添加括号）
      endOfLine: 'auto' // 行尾换行符
    }

上述.prettierrc.js中的规则中，有

*  semi: false，不使用分号
 *  singleQuote: true， 使用单引号
 *  trailingComma: 'none'，不使用拖尾逗号

当然，我们需要保证.prettierrc.js中的格式化规则，都需要适配ESLint standard的规则。

我们可以在项目根目录下的node\_modules\\eslint-config-standard\\eslintrc.json中rules查看ESLint standard的规则

![0693691a07ef4ddc88e47eac8530b562.png][]

而具体的eslint rules解释，可以查看ESLint官网解释

[Rules - ESLint - Pluggable JavaScript Linter![icon-default.png_t_M5H6][]https://eslint.org/docs/latest/rules/][Rules - ESLint - Pluggable JavaScript Linter_icon-default.png_t_M5H6_https_eslint.org_docs_latest_rules]

而.prettierrc.js中的格式化规则含义

[Options · Prettier![icon-default.png?t=M5H6][icon-default.png_t_M5H6]https://prettier.io/docs/en/options.html\#prose-wrap][Options _ Prettier_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_prettier.io_docs_en_options.html_prose-wrap]

## 适用于vue项目的VSCode插件推荐 ##

### Vetur ###

![643b3bf5ed9f48fbad61612f7725d406.png][]

![160d2ff11f2346b6935fcd2ee6982432.png][] 支持Vue语法高亮，Vue代码片段，Emmet语法，简单的Lint检查，简单的格式化，以及组件跳转

### VueHelper ###

### ![f998920913ae45caa4ef45af9a586fea.png][] ###

Vue语法提示，比Vetur更加细节的语法提示

### Auto Close Tag ###

![55e776008f774248855c7412dd33e515.png][] 自动闭合标签，比如我们从elementUI拷贝样例代码时，有时不能拷贝结束标签，此时该插件可以自动补全结束标签。

### Auto Rename Tag ###

![cced3c9f9cbe4aaa9a8ce032812d0e6e.png][] 自动修改标签名，比如我们修改了开始标签的名字，那么该插件可以自动修改结束标签的名字。

[Vue2.x - _-CSDN_vue]: https://blog.csdn.net/qfc_128220/article/details/124094185?spm=1001.2014.3001.5501
[Vue2.x - _-CSDN]: https://blog.csdn.net/qfc_128220/article/details/124926439?spm=1001.2014.3001.5501
[Vue2.x - Vuex_-CSDN_vue2.x vuex]: https://blog.csdn.net/qfc_128220/article/details/125198658?spm=1001.2014.3001.5501
[Vue2.x - Vue Router_-CSDN]: https://blog.csdn.net/qfc_128220/article/details/125363407?spm=1001.2014.3001.5501
[ed8f2f6a18cb4bbf820df79befd717ae.png]: https://img-blog.csdnimg.cn/ed8f2f6a18cb4bbf820df79befd717ae.png
[bd42d52e51244cc0ad1a750af141dc31.png]: https://img-blog.csdnimg.cn/bd42d52e51244cc0ad1a750af141dc31.png
[d391b47a5b05430d9a8a65b20c57e50c.png]: https://img-blog.csdnimg.cn/d391b47a5b05430d9a8a65b20c57e50c.png
[f2b8aee087af4043bccdee6e9374c8a2.png]: https://img-blog.csdnimg.cn/f2b8aee087af4043bccdee6e9374c8a2.png
[0a560c6dd64849eda315de8de28c96ac.png]: https://img-blog.csdnimg.cn/0a560c6dd64849eda315de8de28c96ac.png
[4a9d24f52edc4506ab3820b6d8a83076.png]: https://img-blog.csdnimg.cn/4a9d24f52edc4506ab3820b6d8a83076.png
[d7b09a04fc0a49faa79f793b6a6a094d.png]: https://img-blog.csdnimg.cn/d7b09a04fc0a49faa79f793b6a6a094d.png
[4d7b133d2c3a4650b6db1e56abbdd0a5.png]: https://img-blog.csdnimg.cn/4d7b133d2c3a4650b6db1e56abbdd0a5.png
[a7cb2b4a0e9845ab922909439bced153.png]: https://img-blog.csdnimg.cn/a7cb2b4a0e9845ab922909439bced153.png
[816f3d91ed3741a9b65f042cdbc02348.png]: https://img-blog.csdnimg.cn/816f3d91ed3741a9b65f042cdbc02348.png
[b2ecf515342246d5a9e10ce164145e8c.png]: https://img-blog.csdnimg.cn/b2ecf515342246d5a9e10ce164145e8c.png
[1d6d26f49fc9436788e07985335c22f2.png]: https://img-blog.csdnimg.cn/1d6d26f49fc9436788e07985335c22f2.png
[36c89ff947c3438bbd62e7de0a9f9128.png]: https://img-blog.csdnimg.cn/36c89ff947c3438bbd62e7de0a9f9128.png
[74f43cbe60cd4e5f96fd76e5b89bbce4.png]: https://img-blog.csdnimg.cn/74f43cbe60cd4e5f96fd76e5b89bbce4.png
[7e3f090489bf4c1096e52227b9cbd3d0.png]: https://img-blog.csdnimg.cn/7e3f090489bf4c1096e52227b9cbd3d0.png
[90166b099f7b44d3ae8123a414e84a9c.png]: https://img-blog.csdnimg.cn/90166b099f7b44d3ae8123a414e84a9c.png
[ebf8fd738c1c4e558acb00f0187df0c8.png]: https://img-blog.csdnimg.cn/ebf8fd738c1c4e558acb00f0187df0c8.png
[50ef395f1a3b4489aff896857fef4902.png]: https://img-blog.csdnimg.cn/50ef395f1a3b4489aff896857fef4902.png
[90fbc38b764c49c999a972b80af2832b.gif]: https://img-blog.csdnimg.cn/90fbc38b764c49c999a972b80af2832b.gif
[dbbeb41ebfa24d069f86ba53afcb9e91.gif]: https://img-blog.csdnimg.cn/dbbeb41ebfa24d069f86ba53afcb9e91.gif
[efd3440a3c9c4ac7be1bf2d46bfda396.png]: https://img-blog.csdnimg.cn/efd3440a3c9c4ac7be1bf2d46bfda396.png
[b9b94cff6676424ea79f4036d2f7cfc0.gif]: https://img-blog.csdnimg.cn/b9b94cff6676424ea79f4036d2f7cfc0.gif
[03672401e4304c799b1bb89af421bdec.png]: https://img-blog.csdnimg.cn/03672401e4304c799b1bb89af421bdec.png
[14ade4cee91749a289bf0c059fd41f88.png]: https://img-blog.csdnimg.cn/14ade4cee91749a289bf0c059fd41f88.png
[a625624371d04326823a69c4c48ad096.png]: https://img-blog.csdnimg.cn/a625624371d04326823a69c4c48ad096.png
[6f43276ccd47473d8799e94b60805362.png]: https://img-blog.csdnimg.cn/6f43276ccd47473d8799e94b60805362.png
[0693691a07ef4ddc88e47eac8530b562.png]: https://img-blog.csdnimg.cn/0693691a07ef4ddc88e47eac8530b562.png
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[Rules - ESLint - Pluggable JavaScript Linter_icon-default.png_t_M5H6_https_eslint.org_docs_latest_rules]: https://eslint.org/docs/latest/rules/
[Options _ Prettier_icon-default.png_t_M5H6_icon-default.png_t_M5H6_https_prettier.io_docs_en_options.html_prose-wrap]: https://prettier.io/docs/en/options.html#prose-wrap
[643b3bf5ed9f48fbad61612f7725d406.png]: https://img-blog.csdnimg.cn/643b3bf5ed9f48fbad61612f7725d406.png
[160d2ff11f2346b6935fcd2ee6982432.png]: https://img-blog.csdnimg.cn/160d2ff11f2346b6935fcd2ee6982432.png
[f998920913ae45caa4ef45af9a586fea.png]: https://img-blog.csdnimg.cn/f998920913ae45caa4ef45af9a586fea.png
[55e776008f774248855c7412dd33e515.png]: https://img-blog.csdnimg.cn/55e776008f774248855c7412dd33e515.png
[cced3c9f9cbe4aaa9a8ce032812d0e6e.png]: https://img-blog.csdnimg.cn/cced3c9f9cbe4aaa9a8ce032812d0e6e.png