vscode中使用eslint+prettier的配置

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

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

// ...其他配置项

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

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

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

  1. 全局安装eslint
npm i eslint -g
  1. eslint初始化
npx eslint --init
  1. 安装prettier、以及相关的eslint插件和配置项
npm i prettier eslint-plugin-prettier eslint-config-pretter -D
VSCode 使用 ESLint 插件对代码进行修复非常简单。 首先,我们需要在 VSCode 安装 ESLint 插件。安装完成后,我们需要在项目的根目录下安装 ESLint: ``` npm install eslint --save-dev ``` 然后,我们需要为项目配置一些规则。我们可以使用 `eslint --init` 命令来生成一个 .eslintrc 配置文件,也可以手动创建一个。 接下来,我们需要在 VSCode 启用 ESLint 插件,以便在保存代码时显示错误和警告。打开 VSCode 设置文件,将以下设置添加到其: ``` "eslint.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } ``` 第一行启用了 ESLint 插件,第二行告诉 VSCode 在保存文件时自动修复 ESLint 问题。 现在,当您在 VSCode 编辑器打开任何 JavaScript 文件并保存它时,ESLint 插件将自动修复任何问题。如果有多个问题需要修复,ESLint 插件将在保存文件之前显示一个预览并请求您的确认。 除了自动修复,在代码使用 ESLint 还很方便。如果您看到一个红色波浪线表示有错别字,将鼠标悬停在其上方,ESLint 插件将向您展示听起来有更好的替代方案。如果您在编码时感到困惑,ESLint 插件也可以为您提供重要的建议。 综上所述,在 VSCode 使用 ESLint 插件对代码进行修复非常方便,并且节省了大量的时间和精力。通过配置正确的规则,并启用自动保存功能,你可以在开发始终保持代码的正确性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值