vscode 配置vue+vetur+eslint+prettier自动格式化功能


Posted in Javascript onMarch 23, 2020

该配置用于vue开发,最终效果是保存时自动根据eslint对js、html和css代码进行格式化。

vscode Vetur插件

Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

vscode ESlint插件

Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

基于vue-cli创建的项目 以下相关步骤需要注意:

创建的时候把Linter/Formatter选上(默认已选上)

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择Eslint+Prettier

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择Lint on save (在编辑保存之后根据对代码格式进行检测)

vscode 配置vue+vetur+eslint+prettier自动格式化功能

下一步选择In dedicated config files(将eslint和prettier的配置抽离到独立的文件中)

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

创建完在package.json里面可看到和eslint与prettier相关的依赖

vscode 配置vue+vetur+eslint+prettier自动格式化功能

在.eslintrc.js可以看到总体的eslint规则合并了vue、eslint和prettier的一些插件库进行语法分析(eslint针对js,vue、prettier针对js、html和css,这里eslint和prettier的一些冲突已经处理)

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

到这一步,编译的时候就能看到eslint报错和警告了,但是还不能实现保存自动格式化功能。

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

在文件根目录下创建.prettierrc对prettier格式化进行自定义规则设置,以下为我添加的规则

{
 /* 单引号包含字符串 */
 "singleQuote": true,
 /* 不添加末尾分号 */
 "semi": false,
 /* 在对象属性添加空格 */
 "bracketSpacing": true,
 /* 优化html闭合标签不换行的问题 */
 "htmlWhitespaceSensitivity": "ignore"
}

在用户设置添加自定义设置

mac中的位置

vscode 配置vue+vetur+eslint+prettier自动格式化功能

根据需要选择全局(User)或者工程(Workspace)的配置,点击右上角的编辑按钮,打开settings.json文件

vscode 配置vue+vetur+eslint+prettier自动格式化功能

添加以下配置,使编辑器在保存时自动eslint规则格式化

"editor.codeActionsOnSave": {
 "source.fixAll": true
},
/* 关闭编辑器自带保存格式化功能,此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false

这是我自己的自定义配置

vscode 配置vue+vetur+eslint+prettier自动格式化功能 

非vue-cli创建的项目

单独引入以下红框中的几个依赖

vscode 配置vue+vetur+eslint+prettier自动格式化功能

添加vscode Vetur和ESlint, .eslintrc.js、.prettierrc 和 settings.json的内容和上面一样,这样就可以实现保存自动根据eslint进行格式化了。

总结

引入eslint、vue和prettier的一些相关的依赖

@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
  • 安装vscode Vetur和ESlint插件
  • 配置.eslintrc.js文件
  • 配置.prettierrc文件
  • 配置.settings.json文件

到此这篇关于vscode 配置vue+vetur+eslint+prettier自动格式化功能的文章就介绍到这了,更多相关vscode vue vetur eslint prettier内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 #Javascript
Vue-cli3多页面配置详解
Mar 22 #Javascript
redux处理异步action解决方案
Mar 22 #Javascript
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
解析php中反射的应用
2013/06/18 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
python随机取list中的元素方法
2018/04/08 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
自我介绍演讲稿
2014/01/15 职场文书
法学院毕业生求职信
2014/06/25 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年环保局工作总结
2015/05/22 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
追悼会家属答谢词
2015/09/29 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis