vscode 配置eslint和prettier正确方法
作者：反正你猜不到我是谁 发布时间：2022-12-31 04:54:44
标签：vscode,配置,eslint,prettier
ESlint
ESLint 是一款语法检测工具。因为 JavaScript 本身是一门灵活的动态语言，一千个 JavaScriptor 就有一千种写法。为了方便人们的理解，快速上手别人的代码。
说明
在开发项目的时候，往往会通过eslint来检查代码格式，而prettier用来进行代码的格式化。本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置。
vscode 安装插件
首先，需要在vscode上安装eslint和prettier的插件。
项目中的配置文件
在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中添加下面的内容也可以做到保存格式化：
来源：https://blog.csdn.net/jiunianyiwu/article/details/119154495
0
投稿猜你喜欢
下面主要介绍配置SQL Server数据库恢复模式的两种方法。用T-SQL设置恢复模式你可以使用“ALTER DATABASE”命令加“SE- 直接上代码:<span style="font-family: arial,helvetica,sans-serif; fo
- 除了3天就会失效的临时素材外，开发者有时需要永久保存一些素材，届时就可以通过本接口新增永久素材。最近更新，永久图片素材新增后，将带有URL返
- 网上的SQL优化的文章实在是很多，说实在的，我也曾经到处找这样的文章，什么不要使用IN了，什么OR了，什么AND了，很多很多，还有很多人拿出
- 本文实例为大家分享了tensorflow使用CNN分析mnist手写体数字数据集，供大家参考，具体内容如下import tensorflow
- 上python课程时需要设计一个系统，想着为系统加一个启动动画，所以做成了图片加进度条的形式。本文旨在用python实现无边框的进度条，并在
- 也就在前几天，南太平洋岛国汤加发生火山喷发，有专门的专家学者分析，这可能是30年来全球规模最大的一次海底火山喷发，它引发的海啸以及火山灰将对
- 1. 原因（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。（2）刷新页面，以前申请的内存被释放，重新加载脚本代码
- 前言大家都知道golang的defer关键字，它可以在函数返回前执行一些操作，最常用的就是打开一个资源（例如一个文件、数据库连接等）时就用d
- 在matlab中，存在执行直接得函数来添加高斯噪声和椒盐噪声。Python-OpenCV中虽然不存在直接得函数，但是很容易使用相关的函数来实
- 在上一篇Python接口自动化测试系列文章：Python接口自动化浅析logging日志原理及模块操作流程，主要介绍日志相关概念及loggi
- 本文实例为大家分享了python多进程读图提取特征存npy的具体代码，供大家参考，具体内容如下import multiprocessingi
- 本文主要讲解如何使用python绘制三维的柱形图，如下图源代码如下：import numpy as npimport matplotlib.
- 本文实例讲述了ThinkPHP框架下微信支付功能总结。分享给大家供大家参考，具体如下：摘要此文主要为个人解决 ThinkPHP3.2.3 下
- 在做数据库备份和还原数据库的时候出现"错误2812:未能找到存储过程’master.dbo.xp_fileexist’"
- 本文实例讲述了python多重继承用法，分享给大家供大家参考。具体实现方法如下：1.mro.py文件如下：#!/usr/bin/python
- Wordpress 2.6.2 出来了，今天将网站程序从2.6升级上来，比较了一下2个版本的代码，发现2.6的版本中的代码还有几个地方出现了
- 起步在 Django 的模型中新加了一个日期的字段:import datetimeclass Instance(models.Model):
- python创建一个类很简单只需要定义它就可以了.class Cat: pass就像这样就可以了，通过创建子类我们可以继承他的父
- flatten()函数用法flatten是numpy.ndarray.flatten的一个函数，即返回一个一维数组。flatten只能适用于
