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 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
ES6知识点整理之Proxy的应用实例详解
Apr 16 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
django数据库自动重连的方法实例
2019/07/21 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
毕业生自我鉴定
2013/12/04 职场文书
大学社团活动总结
2014/04/26 职场文书
公司董事长岗位职责
2014/06/08 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
岁月神偷观后感
2015/06/11 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python 中面向接口编程
2022/05/20 Python