.vue文件怎么使用_用VIM配合Prettier规范代码符合VUE官方ESLint规则

一. 遇到的问题

平时在写VUE的时候，总是在运行时看到各种警告，例如酱紫：

Vue运行时的格式警告

那么这些警告是什么？

经过一顿操作之后，才知道，原来这个是vue的ESLint。ESLint主要是用来校验代码风格的。个人或者团队都会有一个ESLint规则，用来统一代码风格。这里放上vue官方规则：

https://github.com/vuejs/eslint-config-vue​github.com

那怎么去掉这些警告呢？

网上确实不少解决方案，那就是关闭ESLint。大家有兴趣的可以自行查询，然后本篇文章就可以到此结束了。

但是，作为一个有理想有抱负的新时代青年，怎么能错过这个学习的机会呢？！（/狗头）

代码规范是很重要的，这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。

又是一顿操作之后了解到，前端代码规范使用两个组件：ESLint和Prettier。

---

二. ESLint和Prettier简介

ESLint是校验代码风格，如果发现代码风格不同怎么办？要么自己手动修改，要么让插件自动改，帮你自动规范代码风格，这就是Prettier所做。

（好吧，这里确实只是简介。/狗头）

有需要详细了解这两者的同学看这篇文章吧，我觉得比较通俗易懂。我们底下直接来上手做了。

人类身份验证 - SegmentFault​segmentfault.com

---

三. 安装vim-prettier

首先是vim-Prettier插件的主页:

https://github.com/prettier/vim-prettier​github.com

我使用的是vim-plug插件管理，开始安装。

在.vimrc文件的插件列表中加入：

Plug 'prettier/vim-prettier', {
   'do': 'yarn install',
   'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'] }

然后使用命令安装：

:PlugInstall

---

四. 使用

该插件可以有如下几个使用方式：

1. 使用命令

:Prettier

2. 使用默认快捷键，其作用和上面的命令是一样的

<Leader>p

<Leader>键需要看个人设置，我设置的是逗号（,）

3. 若你的vim版本为8以上，可以使用异步格式化

:PrettierAsync

该命令会额外格式化后保存文件。

这里我们可以将其映射为快捷键ctrl+l

noremap <c-l> :PrettierAsync<CR>

现在使用vim新建一个example.vue，随便写点什么，在确保没有错误的情况下乱调各种缩进。然后使用使用Prettier插件自动规范，就可以看到神奇的一幕了。嘿嘿！

---

五. 在vue项目中使用

除了在编辑器中配置，还需要前端配置。这些在本文第二节中的链接文章中有详细介绍，大家看的时候可以了解一下。

不过呢！vue-cli帮我们把这些都搞定了、搞定了......（哇哦～～～）

首先我们使用vue-cli创建一个项目

vue create project

然后自己选择功能

vue-cli创建项目时候自定义

第一步自己按需选择，在第二步中选择ESLint + Prettier

vue-cli创建项目的第二步

后面的步骤大家就自行按需选择。

安装完成之后进入项目文件夹，就可以看到文件夹下已经有了ESLint的配置文件.eslintrc.js

项目文件夹下的文件

打开.eslintrc.js和package.json可以看到前端项目中eslint和prettier插件都已经安装配置好了

.eslintrc.js和package.json

至此前端项目中的配置搞定了。

---

五. 修改vim-prettier默认规则

在vue项目的开发中会发现默认的vim-prettier的规则是与vue的规则是不同的，因此这里我总结了几点并给出了修改。

不同之处：

• vue的字符串使用双引号
• vue末尾使用分号
• vue不使用尾逗号

如下是修改，直接写到.vimrc的配置中

" 末尾使用分号
let g:prettier#config#semi = 'true'                                                                       
" 字符串使用单引号
let g:prettier#config#single_quote = 'false'
" 尾逗号
let g:prettier#config#trailing_comma = 'none'

修改之后再去自动格式化vue项目中的代码就没有报错了，非常的清爽。=.=

修改后的prettier使用后的结果

---

六. 其他

• 当然并不是一定要去修改prettier的规则，还是要根据个人或者团队的语言风格，对ESLint规则和prettier的规则同时进行修改，这就需要再去学习ESLint的配置；
• 除了vim中可以添加prettier自动规范，也可以使用插件scrooloose/syntastic，设置检测为eslint；
• 因为一些原因这段时间使用过一段时间的vscode，有些功能确实是惊艳到我了，尤其在做前端开发的时候，但是使用之后还是因为总是要右手切换键盘和鼠标，就很烦，还是用我大VIM舒服。（vscode的vim插件真的是.../狗头）
• 这里给出我的vim配置，有需要的同学可以瞅瞅

Kuari/Vim-config​github.com

---

七. 声明

这篇文章仅是我作为前端菜鸟这段时间对于前端代码规范学习的总结和分享，若有错误或者更好的方法，还请大佬指正。