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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • pycharm、idea、golang等JetBrains其他IDE修改行分隔符的详细步骤(换行符)

    pycharm、idea、golang等JetBrains其他IDE修改行分隔符的详细步骤(换行符)

    这篇文章主要介绍了pycharm、idea、golang等JetBrains其他IDE修改行分隔符(换行符),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何在本地部署 DeepSeek Janus Pro 文生图大模型

    如何在本地部署 DeepSeek Janus Pro 文生图大模型

    DeepSeek JanusPro模型在本地成功部署,支持图片理解和文生图功能,通过Gradio界面进行交互,展示了其强大的多模态处理能力,本文介绍本地部署 DeepSeek Janus Pro 文生图大模型的操作,感兴趣的朋友一起看看吧
    2025-02-02
  • resty更新header控制api版本数据源读写分离

    resty更新header控制api版本数据源读写分离

    这篇文章主要介绍了resty的1.2.0-SNAPSHOT版本更新,可以通过header控制api的版本实现数据源读写分离,有需要的朋友可以借鉴参考下,希望能够有所帮助<BR>,
    2022-03-03
  • 开发人员一定要加入收藏夹的网站 推荐

    开发人员一定要加入收藏夹的网站 推荐

    开发人员一定要加入收藏夹的网站,比较不错。大家可以参考一下。
    2009-11-11
  • 超实用Internet Download Manager(IDM)破解注册码,全版本通用

    超实用Internet Download Manager(IDM)破解注册码,全版本通用

    IDM下载器是一个十分好用的文件下载工具。IDM下载器它能够帮助你提升5倍的下载速度,强大的续传功能,让你不再担心因网络问题、计算机宕机、停电等原因所造成的数据不全问题,下面小编给大家带来了Internet Download Manager(IDM)破解注册码,感兴趣的朋友参考下吧
    2023-01-01
  • 计算机科学中32个常用的基础算法

    计算机科学中32个常用的基础算法

    这篇文章主要介绍了计算机科学中32个常用的基础算法,也是计算机科学中最重要的算法,需要的朋友可以参考下
    2014-06-06
  • Win10下配置VScode远程开发ssh-remote(免密登录)

    Win10下配置VScode远程开发ssh-remote(免密登录)

    在开发或者做实验的过程中,我们经常会用到远程服务器或者Github的项目,本文详细介绍的VScode配置免密ssh+remote,一旦连接成功,我们就可以在本地自己喜欢的IDE上操作远程服务器端的项目了
    2021-08-08
  • 详解Hadoop 运行环境搭建过程

    详解Hadoop 运行环境搭建过程

    这篇文章主要介绍了Hadoop 运行环境搭建过程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Notepad++文本比较插件Compare详解(最新免费)

    Notepad++文本比较插件Compare详解(最新免费)

    Notepad++是一款强大的文本编辑器,它提供了文件对比功能,可以帮助我们快速找出两个文件之间的差异点,这篇文章主要介绍了Notepad++文本比较插件Compare详解(最新免费),感兴趣的朋友一起看看吧
    2024-01-01
  • 一文详解软件测试需求分析是什么

    一文详解软件测试需求分析是什么

    需求分析是掌握被测系统的过程,一般测试和开发人员都要进行需求分析,测试方做的需求分析称为测试需求分析,这篇文章主要给大家介绍了关于软件测试需求分析的相关资料,需要的朋友可以参考下
    2007-04-04

最新评论