vscode中使用eslint+prettier的配置

eslint+prettier+vscode自动保存用起来感觉非常爽快。

一般来说,安装eslint+prettier插件,然后使用相关脚手架配套的eslint+prettier,无法自动格式代码,每次都需要执行格式化命令。这里贴出保存自动格式化代码的setting.json。

javascript 复制代码
// ...其他配置项

// eslint配置开始
// eslint检测开关
"eslint.enable": true,
// 需要eslint校验的文件
"eslint.validate": {
	"javascript",
	"javascriptreact",
	"typescript",
	"typescriptreact",
	"vue",
}
"editor.codeActionsOnSave": { // 编辑器.代码保存时动作
	"source.fixAll.eslint": true // 使用eslint修复所有
}

如果不使用脚手架自带的eslint+prettier配置,可以参考我之前写的项目构建之代码检测

这里归纳一下三个安装命令。

  1. 全局安装eslint
powershell 复制代码
npm i eslint -g
  1. eslint初始化
powershell 复制代码
npx eslint --init
  1. 安装prettier、以及相关的eslint插件和配置项
powershell 复制代码
npm i prettier eslint-plugin-prettier eslint-config-pretter -D
相关推荐
kafei_*1 天前
VScode 添加 UV虚拟环境方法
vscode·python·uv
乐之者v1 天前
AI编程 -- codex添加代码,在intellij Idea中没有显示,如何处理?
java·ide·intellij-idea
Eric.Lee20211 天前
vscode格式化代码
ide·vscode·编辑器·c++格式化
会笑的小熊2 天前
VScode项目推送到git仓库
ide·git·vscode
SilentSamsara2 天前
装饰器基础:从闭包到装饰器的自然演变
开发语言·前端·vscode·python·青少年编程·pycharm
【 STM32开发 】2 天前
VSCode 安装图解
ide·vscode·编辑器
_ 川三西2 天前
Anaconda安装后环境变量的添加
vscode·conda
CHINA红旗下2 天前
如何使用vscode开发STM32
ide·vscode·stm32
boonya2 天前
Idea CC GUI插件如何通过 CC Switch 工具将 Claude Code 的后端配置为 DeepSeek 的 v4-pro 模型?
java·ide·intellij-idea
IOT.FIVE.NO.12 天前
Codex、Claude Code、Cherry Studio 实测对比:CLI、桌面端怎么选?
ide·人工智能·编辑器·ai编程·ai写作·visual studio·vibecoding