vscode 配置eslint和prettier正确方法

 更新时间:2021年07月28日 11:04:39   作者:反正你猜不到我是谁  
ESLint 是一款语法检测工具而prettier 是一个代码格式化插件,今天给大家分享vscode 配置eslint和prettier正确方法,感兴趣的朋友一起看看吧

ESlint

ESLint 是一款语法检测工具。因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法。为了方便人们的理解,快速上手别人的代码。

说明

在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化。本篇博文主要是记录使用vscode开发vue项目时的eslintprettier的配置。

vscode 安装插件

首先,需要在vscode上安装eslintprettier的插件。

在这里插入图片描述
在这里插入图片描述

项目中的配置文件

在vue项目中,.eslintrc.js文件主要负责eslint的相关配置。

在这里插入图片描述

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    quotes: ['error', 'single', { allowTemplateLiterals: true }], // 单引号 允许使用反引号
    semi: ['error', 'never'], // 禁止末尾使用分号
  },
};

关于更多的eslint规则,可以点击这里查看。

.prettierrc.js文件负责prettier的规则设置:

在这里插入图片描述

module.exports = {
  tabWidth: 2,  // tab
  semi: false,  // 结尾不用分号
  singleQuote: true,  // 使用单引号
  bracketSpacing: true,  // 对象属性前后加空格
  disableLanguages: ['vue'],  // 不格式化vue文件
}

prettier

prettier 是一个代码格式化插件。它并不关心你的语法是否正确,只关心你的代码格式,比如是否使用单引号,语句结尾是否使用分号等等。

关于prettier更多详细的规则,可以点击这里查看。

保存自动格式化

如果希望在vscode中文件保存后就自动格式化,可以在设置中进行如下的设置:

在这里插入图片描述

或者在settings.json中添加下面的内容也可以做到保存格式化:

在这里插入图片描述

到此这篇关于vscode 配置eslint和prettier的文章就介绍到这了,更多相关vscode 配置eslint和prettier内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 戏说编码发展史

    戏说编码发展史

    本文从一个风趣的角度详细介绍了计算机编码的发展历史,十分的有趣,小伙伴们仔细研读下吧,了解下相关知识也是非常有必要的。
    2015-01-01
  • 关于HTTPS的TSL握手

    关于HTTPS的TSL握手

    这篇文章主要介绍了关于HTTPS的TSL握手,HTTP一般基于TCP协议,而HTTPS就是在这之间加了SSL/TLS协议,那么在TCP三次握手建立TCP连接后,就需要TLS握手建立SSL/TLS连接,需要的朋友可以参考下
    2023-04-04
  • MyBatisCodeHelper-Pro插件破解版详细教程[2.8.2]

    MyBatisCodeHelper-Pro插件破解版详细教程[2.8.2]

    MyBatisCodeHelper-Pro是IDEA下的一个插件,功能类似mybatis plugin。这篇文章给大家介绍MyBatisCodeHelper-Pro插件破解版[2.8.2]的相关知识,感兴趣的朋友跟随小编一起看看吧
    2020-09-09
  • 微信报警 zabbix实现详解

    微信报警 zabbix实现详解

    这篇文章主要介绍了微信报警 zabbix方法的相关资料,需要的朋友可以参考下
    2016-09-09
  • Vscode常用快捷键列表、插件安装、console.log详解

    Vscode常用快捷键列表、插件安装、console.log详解

    对于开发者来说,在开发过程必须要掌握Vscode常用快捷键列表、插件安装、console.log的相关知识,今天通过本文实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2021-05-05
  • 如何部署kubernetes-dashboard改成http免密登录

    如何部署kubernetes-dashboard改成http免密登录

    这篇文章主要介绍了如何部署kubernetes-dashboard改成http免密登录,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • UltraEdit编辑器免费激活方法

    UltraEdit编辑器免费激活方法

    UltraEdit 是一套功能强大的文本编辑器,可以编辑文本、十六进制、ASCII 码,完全可以取代记事本,下面小编把这款UltraEdit编辑器免费激活方法分享给大家,需要的朋友参考下
    2021-08-08
  • 通过lms.samples熟悉lms微服务框架的使用详解

    通过lms.samples熟悉lms微服务框架的使用详解

    这篇文章主要介绍了通过lms.samples熟悉lms微服务框架的使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 深入解析HetuEngine实现On Yarn原理

    深入解析HetuEngine实现On Yarn原理

    这篇文章主要介绍了HetuEngine实现On Yarn原理,介绍了HetuEngine On Yarn的原理,其实现主要是借助了Yarn Service提供的能力,感兴趣的朋友一起通过本文学习下
    2022-01-01
  • NoVNC以Web方式交付VNC远程连接的方法

    NoVNC以Web方式交付VNC远程连接的方法

    noVNC是一个 HTML5 VNC 客户端,采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现,这篇文章主要介绍了NoVNC以Web方式交付VNC远程连接的方法,感兴趣的朋友一起看看吧
    2021-09-09

最新评论