Vue-cli Eslint在vscode里代码自动格式化的方法


Posted in Javascript onFebruary 23, 2018

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。

添加对.vue文件的格式化支持

这里我们添加对 .vue 文件的格式化支持。

1. 安装 Vetur 插件
2. 在 VS Code 的设置中添加如下规则:

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

这里是设置 Vetur 默认使用的格式化插件 prettier。 这样对于.vue文件中的 html 和 javascript 代码都有格式化支持了。

vue eslint 代码自动格式化

  1. vue-cli 代码风格为JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码
  2. VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)

建议阅读:

  1. vscode插件推荐
  2. JavaScript Standard Style 代码风格规范

正文 eslint 自动格式化

配置环境:

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

创建项目跟路径下的文件:.eslintrc | .eslint.js

// 添加插件
"plugins": [
  "vue"
]

在你的vscode设置文件里添加:

1、在vscode添加 eslint 插件
2、在vscode添加 vetur 插件
3、修改你的setting.json

// 添加进你的vscode的 setting.json

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",{
    "language": "vue",
    "autoFix": true
  },"html",
  "vue"
],

参考文集:

https://stackoverflow.com/questions/45852531/eslint-code-format-in-vue
https://github.com/varHarrie/Dawn-Blossoms/issues/10

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
You might like
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
layui table 获取分页 limit的方法
2019/09/20 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python随机取list中的元素方法
2018/04/08 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
如何卸载python插件
2020/07/08 Python
python飞机大战游戏实例讲解
2020/12/04 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
学术诚信承诺书
2014/05/26 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers