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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
BootStrap selectpicker
Jun 20 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
js实现随机点名
Jan 19 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
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
cookie的secure属性详解
2015/04/08 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
SQL SERVER面试资料
2013/03/30 面试题
Linux文件系统类型
2012/02/15 面试题
应届生服务员求职信
2013/10/31 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
关于保护环境的标语
2014/06/09 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
城南旧事读书笔记
2015/06/29 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python