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中添加下面的内容也可以做到保存格式化:

到此这篇关于vscode 配置eslint和prettier的文章就介绍到这了,更多相关vscode 配置eslint和prettier内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
pycharm、idea、golang等JetBrains其他IDE修改行分隔符的详细步骤(换行符)
这篇文章主要介绍了pycharm、idea、golang等JetBrains其他IDE修改行分隔符(换行符),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
如何在本地部署 DeepSeek Janus Pro 文生图大模型
DeepSeek JanusPro模型在本地成功部署,支持图片理解和文生图功能,通过Gradio界面进行交互,展示了其强大的多模态处理能力,本文介绍本地部署 DeepSeek Janus Pro 文生图大模型的操作,感兴趣的朋友一起看看吧2025-02-02
超实用Internet Download Manager(IDM)破解注册码,全版本通用
IDM下载器是一个十分好用的文件下载工具。IDM下载器它能够帮助你提升5倍的下载速度,强大的续传功能,让你不再担心因网络问题、计算机宕机、停电等原因所造成的数据不全问题,下面小编给大家带来了Internet Download Manager(IDM)破解注册码,感兴趣的朋友参考下吧2023-01-01
Win10下配置VScode远程开发ssh-remote(免密登录)
在开发或者做实验的过程中,我们经常会用到远程服务器或者Github的项目,本文详细介绍的VScode配置免密ssh+remote,一旦连接成功,我们就可以在本地自己喜欢的IDE上操作远程服务器端的项目了2021-08-08
Notepad++文本比较插件Compare详解(最新免费)
Notepad++是一款强大的文本编辑器,它提供了文件对比功能,可以帮助我们快速找出两个文件之间的差异点,这篇文章主要介绍了Notepad++文本比较插件Compare详解(最新免费),感兴趣的朋友一起看看吧2024-01-01


最新评论