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 相关文章推荐
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
单元选择合并变色示例代码
May 26 Javascript
Express的路由详解
Dec 10 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 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统计字符串中中英文字符的个数
2013/06/23 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python数组定义方法
2016/04/13 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python实现批量图片格式转换
2020/06/16 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
django model通过字典更新数据实例
2020/04/01 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
编辑求职信样本
2013/12/16 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
优秀求职信范文分享
2014/01/26 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers