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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
可以将word转成html的js代码
Apr 11 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
UI Events 用户界面事件
Jun 27 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
微信小程序实现日历功能
Nov 27 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php中session使用示例
2014/03/29 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
js实现图片轮播效果
2015/12/19 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
浅析Python requests 模块
2020/10/09 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
音乐教学反思
2014/02/02 职场文书
教师师德演讲稿
2014/05/06 职场文书
绿色环保演讲稿
2014/05/10 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
java版 简单三子棋游戏
2022/05/04 Java/Android