vscode配置vue下的es6规范自动格式化详解
前言
最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件
导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常
写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm
否掉的编辑器
Atom
这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉
sublime
同上,以前sublime没发现墙,但是现在好像有墙了,所以懒得折腾,弃掉
webstorm
webstorm 的强大不做解释,但是就是太大,太慢,界面不喜欢是最终理由,弃掉
MAC配置下vscode自动格式化vue
相关插件:ESLint,JavaScript(ES6),vetur
先安装相关插件。打开settings.json,在代码块里面添加
"eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "eslint.autoFixOnSave": true, "explorer.confirmDragAndDrop": false, "editor.detectIndentation": false, "editor.tabSize": 2, "vetur.format.defaultFormatter.js": "none"
保存然后重启,解决
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue-cli Eslint在vscode里代码自动格式化的方法
编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu
-
vscode下的vue文件格式化问题
我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是: { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter
-
vscode配置vue下的es6规范自动格式化详解
前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的编辑器 Atom 这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉 sublim
-
vue 下列表侧滑操作实例代码详解
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧.有点多 效果如图 <template> <div class="lottery-management-wrapper"> <ul> <li class="lottery-management-list-wrapper"> <div class="lottery-management-list" v-for="(item ,
-
Linux下MongoDB数据库实现自动备份详解
本文主要给大家介绍的是关于Linux下MongoDB数据库实现自动备份的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.创建MongoDB备份目录 mkdir -p /data/mongodb_bak/mongodb_bak_now mkdir -p /data/mongodb_bak/mongodb_bak_list 二.新建MongoDB数据库备份脚本(/data/mongodb_bak/MongoDB_bak.sh) #!/bin/bash #backup MongoDB
-
Vue下拉菜单组件化开发详解
本文实例为大家分享了Vue下拉菜单组件化开发的具体代码,供大家参考,具体内容如下 搞一个自定义组件,只是一个很简单的下拉菜单,也就是一个思路,整起 第一步:在项目中专门创建一个放置自定义组件的文件夹(直接components底下的common中) dropdown.vue 为一级盒子 dropdownMenu.vue 为二级盒子 dropdownItem.vue 为二级盒子内容 第二步 : 对dropdown.vue的操作 <template> <div class="box&
-
vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For
-
vscode配置setting.json文件实现eslint自动格式代码
一.ESlint+Vetur 实现ESlint代码规范 二.重点----旧版本(旧版本配置在setting.json 会出现警告) { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, { "language"
-
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab
-
vue cli4下环境变量和模式示例详解
本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con
-
Linux下tcpdump命令解析及使用详解
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具.tcpdump可以将网络中传送的数据包的"头"完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.not等逻辑语句来帮助你去掉无用的信息. 实用命令实例 默认启动 tcpdump 普通情况下,直接启动tcpdump将监视第一个网络接口上所有流过的数据包. 监视指定网络接口的数据包 tcpdum
-
vue组件生命周期钩子使用示例详解
目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
随机推荐
- 使用xtrabackup实现mysql备份
- Python3使用requests包抓取并保存网页源码的方法
- Java 读取类路径下的资源文件实现代码
- WPF实现定时刷新UI界面功能
- PHP数组和explode函数示例总结
- php ignore_user_abort与register_shutdown_function 使用方法
- 响应对象 错误 'ASP 0185 : 80020003' 缺少默认属性
- 分享MySQL的自动化安装部署的方法
- Debian 6.02 (squeeze)下编译安装 MySQL 5.5的方法
- ThinkPHP中调用PHPExcel的实现代码
- Linux中的内核链表实例详解
- 在python3环境下的Django中使用MySQL数据库的实例
- js中通过getElementsByName访问name集合对象的方法
- Expandable "Detail" Table Rows
- spring结合redis如何实现数据的缓存
- jQuery+PHP实现可编辑表格字段内容并实时保存
- jquery.validate使用攻略 第二部
- 浅谈标签和JLabel类构造方法 原创
- java中String的一些方法深入解析
- 浅谈go语言renderer包代码分析