vscode中使用eslint+prettier的配置

怪大叔一2023-09-05 14:30

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配置，可以参考我之前写的项目构建之代码检测

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

全局安装eslint

powershell 复制代码

npm i eslint -g

eslint初始化

powershell 复制代码

npx eslint --init

安装prettier、以及相关的eslint插件和配置项

powershell 复制代码

npm i prettier eslint-plugin-prettier eslint-config-pretter -D