前言

使用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. 数值分析实验之曲线最小二乘拟合含有噪声扰动(python实现)

    一.实验目的 掌握最小二乘法拟合离散数据,多项式函数形式拟合曲线以及可以其他可以通过变量变换转化为多项式的拟合曲线目前待实现功能: 1. 最小二乘法的基本实现. 2. 用不同数据量,不同参数,不同的多 ...

  2. MySQL系列(三)

    本章内容: 视图.增/删/改/查 触发器.增/删/改/查 存储过程.增/删/改/查 存储过程三种传参,pymysql 怎么用? 函数.增/删/改/查/return值 内置函数 事务 1.1视图 视图是 ...

  3. Spring Boot中的Properties

    文章目录 简介 使用注解注册一个Properties文件 使用属性文件 Spring Boot中的属性文件 @ConfigurationProperties yaml文件 Properties环境变量 ...

  4. JDK13的六大重要新特性

    文章目录 JDK13的六大重要特性 支持Unicode 12.1 动态CDS归档(Dynamic CDS Archiving) java.net.Socket和java.net.ServerSocke ...

  5. Javascript基础之-var,let和const深入解析(二)

    你想在在变量声明之前就使用变量?以后再也别这样做了. 新的声明方式(let,const)较之之前的声明方式(var),还有一个区别,就是新的方式不允许在变量声明之前就使用该变量,但是var是可以得.请 ...

  6. js高阶函数的理解

    高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...

  7. 如何创建和部署自己的EOS代币

    本文我们将弄清楚什么是EOS代币以及如何自己创建和部署EOS代币. 与以太坊相反,EOS带有即插即用的代币智能合约.以太坊拥有ERC20智能合约,EOS拥有eosio.token智能合约.Eosio. ...

  8. Leetcode---Solutions&Notes

    Leetcode已经成为面试必备技能之一,为了紧随潮流,也模仿大佬们刷刷题. 1.采用"龟系"做法,每道题尽量做到时间复杂度和空间复杂度的较优水平: 2.每道题的Solution先 ...

  9. DP背包(一)

    01背包 for(int i=0;i<n;i++) //遍历每一件物品 for(int j=v;j>=wei[i];j--)//遍历背包容量,表示在上一层的基础上,容量为J时,第i件物品装 ...

  10. 图论--二分图最佳完美匹配(KM模板)

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; cons ...