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
相关推荐
usdoc文档预览17 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
寂寞的船19 小时前
【Unity知识速递】第4期 MCP for Unity:用 AI 自然语言控制编辑器
人工智能·unity·编辑器
寂寞的船21 小时前
【Unity知识速递】第6期 URP性能优化完全指南:从内存到GPU的三维调优
unity·性能优化·编辑器
浮尘笔记2 天前
JetBrains差异设置被自动勾选的排查与根治实录
经验分享·程序人生·编辑器·intellij idea·phpstorm·webstorm
Dream-Y.ocean2 天前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
独隅2 天前
WebStorm macOS 安装部署与高效调优实战指南
ide·macos·webstorm
golang学习记2 天前
IDEA 2026.3 远程开发迎来重磅升级
java·ide·intellij-idea·远程开发
NextTech_3 天前
不想学 vim,怎么改服务器上的配置文件?
服务器·编辑器·vim
别问!问就是全会4 天前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
ITKEY_4 天前
emacs 文件管理Dired, the Directory Editor
linux·编辑器·emacs