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

vetur:可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,

Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了

代码如下:

{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 4,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
}

原作者:Guoyubo

链接:https://www.jianshu.com/p/23a5d6194a4b

在vscode中使用eslint+prettier格式化vue项目代码 (转载)的更多相关文章

  1. 解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  2. vscode中使用beautify插件格式化vue文件

    1.点击设置,找到beautify.language并在html一栏里加上vue "beautify.language": { "js": { "ty ...

  3. 在VSCode中配置Eslint格式化

    在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...

  4. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  5. VSCode 使用 ESLint + Prettier 来统一 JS 代码

    环境: VSCode 1.33.1 Node.js 8.9.1 一.ESLint 1.介绍 ESLint是最流行的JavaScript Linter. Linter 是检查代码风格/错误的小工具.其他 ...

  6. 使用ESLint+Prettier来统一前端代码风格

    Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...

  7. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  8. vscode+eslint自动格式化vue代码的方法

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

  9. 在VSCode中开启ESLint风格审查

    最近一直在学习开发一个VUE项目,几乎没有前端基础摸爬滚打,就一边摸索HTML,JS,CSS一边模仿着已有代码开发,也还算能学到东西. VSCode确实还不错,很轻量.在刚开始学写vue的时候,后台总 ...

随机推荐

  1. CSS问题

    当标签之间有缝隙  两个a标签之间消除缝隙  可在div设置 font-size:0 ul下的li去掉小圆点:设置 ul list-style:none <div> <a> & ...

  2. centos7下安装docker(dockerfile常用的指令)

    FROM:指定ase镜像 MAINTAINER:设置镜像作者,可以是任意字符 COPY:将文件从build  context复制到镜像.支持两种形式:1.COPY src dest 2.COPY [“ ...

  3. ABP之多租户

    “软件多租户”指的是一种软件架构,一个软件实例在一个服务器上运行,但为多个租户服务.租户们对软件实例有通用的访问入口,但是每个租户都有特定的权限. 在多租户体系架构中,用程序旨在为每个租户提供一个专用 ...

  4. Ceva定理的四种证明方法

    ${\color{Teal} {Ceva定理}}$设$D.E.F$依次为三角形ABC的边$AB.BC.CA$的内点,记 $λ$=(A,B,D),$μ$=(B,C,E),$v$=(C,A,F) 求证:三 ...

  5. 洛谷P2756 飞行员配对方案问题

    二分图裸题,找他的最大匹配即可 #include<bits/stdc++.h> using namespace std; int n,m,ans; ; int to[N]; struct ...

  6. MT 【331】两元非齐次不等式

    若正实数$x,y$满足$x^3+y^3=(4x-5y)y$ 则 $y$ 的最大值为____ 解答:$x^3+y^3+y^2=4(x-y)y\le x^2$,故$y^3+y^2=x^2-x^3=\dfr ...

  7. FixedThreadPool吞掉了异常

    为了方便遍描述问题,如下是简化后的 public class RunException { public static void main(String[] args) { ExecutorServi ...

  8. Java Socket、计算机网络

    一个服务器对应一个客户端 http://blog.51cto.com/wangdy/1588379 https://www.cnblogs.com/rocomp/p/4790340.html pack ...

  9. Spring Security 登录校验 源码解析

    传统情况下,在过滤器中做权限验证,Spring Secuirty也是在Filter中进行权限验证. 创建并注册过滤器 package com.awizdata.edubank.config; impo ...

  10. python8--文件操作 with。。。open语法

    复习   一.类型转换 1.数字类型:int() | bool() | float()  2.str与int:int('10') | int('-10') | int('0') | float('-. ...