vscode+eslint自动格式化vue代码的方法
前言
使用vscode开发vue项目的时候,为了编码格式的统一化,使用eslint规范进行格式化。此时通过eslint插件可以实现对vue代码的自动格式化。
使用方式
在vscode的插件模块处,搜索eslint。找到下面的插件。

安装完成后,进行配置。
file --> preferences --> setting
找到eslint。

打开setting.json。
在里面配置如下代码:
{
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.codeAction.disableRuleComment": {},
"eslint.alwaysShowStatus": true,
}
重启后,修改代码,当不符合es规范的时候,使用ctrl+s保存的时候,就自动修复了。
vscode+eslint自动格式化vue代码的方法的更多相关文章
- vs code 设置 保存自动格式化vue代码
配置 ESLint (需安装 Prettier - Code formatter 插件) command + shift + p 打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...
- 在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
- vscode 保存自动 格式化eslint 代码
在网上找了很多种方法,大多都没有成功 一下是一种成功的 配置方法: 1) First, you need to install the ESLint extension in the VS code ...
- PyCharm配置autopep8,自动格式化Python代码
1. 关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:h ...
- vscode在vue-cli中按照ESlint自动格式化代码
先安装 1 npm i -S eslint-plugin-vue .eslintrc下 1 2 3 "plugins": [ "vue" ] vscod ...
- vscode 格式化vue代码单引号变双引号
首选项->设置.输入框输入vetur vscode中设置 "vetur.format.defaultFormatterOptions": { "prettier&q ...
- 配置 ESLint 自动格式化自闭合标签(Self closing tag)
对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...
- WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...
- vscode编辑器自动生成.vue文件
1.选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue 选择vue后,编辑器会自动打开一个名字为vue.json的文件 2.复制以下内容到这个文件中: { ...
随机推荐
- Element里el-badge在el-tab里视图不被渲染问题
我们发现:el-badge绑定的变量是有数据的,但是界面上就是不渲染. 这个时候执行getTodo发现数据已经打印出来,当是视图未发送变化.于是查阅资料:vm.$forceUpdate()示例:迫使 ...
- Os-Hax: 1 靶机记录
靶机地址:172.16.1.197 Kali地址:172.16.1.108 1 信息搜集 靶机首页 相关信息查看 端口扫描: 开放22和80 目录扫描: 访问http://172.16.1.197/c ...
- kubernetes的cni0和flannel.1的关系?
当容器运行之后,节点之间多了个虚拟接口cni0,它是由flanneld创建的一个虚拟网桥叫cni0,供pod本地通信使用.flanneld为每个pod创建一对veth虚拟设备,一端放在容器接口上,一端 ...
- Java 网络编程 -- 基于TCP 模拟多用户登录
Java TCP的基本操作参考前一篇:Java 网络编程 – 基于TCP实现文件上传 实现多用户操作之前先实现以下单用户操作,假设目前有一个用户: 账号:zs 密码:123 服务端: public c ...
- PHP 获取前两页的url地址
通过隐藏表单控件 <input type="hidden" name="prevurl" value="<?php echo $_SERV ...
- centos7在命令行下安装图形界面
yum groupinstall "GNOME Desktop" "Graphical Administration Tools" ln -sf /lib/sy ...
- [C语言] 获得 pwd 的几种函数
_getcwd() GetCurrentDirectory GetModuleFileName main函数参数 argv[0] // crt_getcwd.c // This program pla ...
- docker 部署FastDFS
教程:https://blog.csdn.net/fangchao2011/article/details/103202591 教程:https://www.jianshu.com/p/3f80cba ...
- Ubuntu 之 win10更新ubuntu启动项消失
问题描述: 昨晚windows更新,今天启动的时候发现启动项没有了,直接进入windows. 解决方案一: 首先进入BIOS看一看是否开启启动项选择,然后再把安全模式(secure boot)关闭(重 ...
- Java阻塞队列四组API介绍
Java阻塞队列四组API介绍 通过前面几篇文章的学习,我们已经知道了Java中的队列分为阻塞队列和非阻塞队列以及常用的七个阻塞队列.如下图: 本文来源:凯哥Java(kaigejava)讲解Java ...