前言

使用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代码的方法的更多相关文章

  1. vs code 设置 保存自动格式化vue代码

    配置 ESLint (需安装 Prettier - Code formatter 插件) command + shift + p  打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...

  2. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  3. vscode 保存自动 格式化eslint 代码

    在网上找了很多种方法,大多都没有成功  一下是一种成功的 配置方法: 1) First, you need to install the ESLint extension in the VS code ...

  4. PyCharm配置autopep8,自动格式化Python代码

    1. 关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:h ...

  5. vscode在vue-cli中按照ESlint自动格式化代码

    先安装 1 npm i -S eslint-plugin-vue .eslintrc下 1 2 3 "plugins": [     "vue" ] vscod ...

  6. vscode 格式化vue代码单引号变双引号

    首选项->设置.输入框输入vetur vscode中设置 "vetur.format.defaultFormatterOptions": { "prettier&q ...

  7. 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...

  8. WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...

  9. vscode编辑器自动生成.vue文件

    1.选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue 选择vue后,编辑器会自动打开一个名字为vue.json的文件 2.复制以下内容到这个文件中: { ...

随机推荐

  1. mysql参数max_binlog_cache_size设置不当引发的血案

    日常运维中的坑真是防不胜防,不一小心就遇到别人给你挖的坑.最近又遇到经验不足的DBA不知道从哪拷贝的配置文件(据说是当时参加某培训机构视频培训是资料里的模板,真的是误人子弟呀),其中把max_binl ...

  2. 神奇的Kivy,让Python快速开发移动app

    随着移动互联网的不断发展,手机.Pad等移动终端已经被普遍使用,充斥在人们的工作.学习和生活中,越来越多的程序都转向移动终端,各类app应用相拥而至. Kivy作为Python的Android和IOS ...

  3. GitHub 热点速览 Vol.17:在?各家视频会员要不要?

    作者:HelloGitHub-小鱼干 摘要:经济实用,用作上周的 GitHub 热点的横批再合适不过.先不说 GitHub Trending 上不止一个的会员共享项目,免你找好友刷脸要会员,这项目实在 ...

  4. Spark SQL源码解析(三)Analysis阶段分析

    Spark SQL原理解析前言: Spark SQL源码剖析(一)SQL解析框架Catalyst流程概述 Spark SQL源码解析(二)Antlr4解析Sql并生成树 Analysis阶段概述 首先 ...

  5. 【Django 2.2文档系列】Model 外键中的on_delete参数用法

    场景 我们用Django的Model时,有时候需要关联外键.关联外键时,参数:on_delete的几个配置选项到底是干嘛的呢,你知道吗? 参数介绍 models.CASCADE 级联删除.Django ...

  6. think--数据库的设置

    1.在项目下的Common下的Conf下的config.php 配置: 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'localhost', / ...

  7. 20199308《Linux内核原理与分析》第十二周作业

    一.实验简介 竞态条件是指多个线程同时访问或者操作同一块数据,运行的结果依赖于不同线程访问数据的顺序.如果一个拥有root权限的程序存在竞态条件漏洞的话,攻击者可以通过运行一个平行线程与漏洞程序竞争, ...

  8. 快速部署一个Kubernetes集群

    官方提供的三种部署方式 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,仅用于尝试Kubernetes或日常开发的用户使用. 部署地址:https:// ...

  9. java中CompletionService的使用

    java中CompletionService的使用 之前的文章中我们讲到了ExecutorService,通过ExecutorService我们可以提交一个个的task,并且返回Future,然后通过 ...

  10. Spring5参考指南: SpEL

    文章目录 Bean定义中的使用 求值 支持的功能 函数 Bean引用 If-Then-Else Elvis Safe Navigation 运算符 集合选择 集合投影 表达式模板化 SpEL的全称叫做 ...