vscode 、eslint、prettier 的孽缘

今天在配置一个新项目的时候,被一个新项目搞得头痛。

我准备配置 prettier 来格式代码,然后把 prettier 添加到 eslint 规则中,这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样,无论我怎么格式化代码,不是控制台报错,就是 vscode 显示代码标红。

最后捋清楚了,原来是 vscode 的 eslint 插件,热更本地配置时没有完全加载成功。需要重启 vscode 才能让代码视图和控制台一致。

下面是使用 vite 启动项目的配置:

vscode

新建 .vscode/settings.json 配置保存时修改:

json 复制代码
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

然后记得安装两个插件:

现在一切顺利。

eslint

配置本地的 .eslintrc 配置如下:

js 复制代码
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
  	// ... others config
    "plugin:prettier/recommended",
  ],
};

记住要下载一堆的库,参考这里:eslint-plugin-prettier

prettier

配置本地的的 .prettierrc

json 复制代码
{
  "endOfLine": "auto",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 140,
  "singleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true
}

最后启动项目,不出意外的话就出意外了,如果你是按上面的顺序配置,会发现代码可以正常保存了,同时控制台也不报错。但是视图上就是一堆红,比如:

同时看向控制台会发现,eslint 没报错:

我配置的时候百思不得其解,结果你猜怎么着?重启 vscode 一切都变好了,控制台也不报错了,视图也不报错了。

所以原因是 eslint 的 vscode 插件本地热更是有问题。如果改了 eslint 配置,那么最好的方式是重启一下 vscode,重新让 vscode 插件加载配置,才能保持视图和脚本都不会报错。

相关推荐
android_xc1 小时前
Android Studio国内仓库配置
android·ide·android studio
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
雁于飞2 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
乐吾乐科技3 小时前
乐吾乐大屏可视化组态软件【SQL数据源】
物联网·信息可视化·编辑器·数据可视化·大屏端
Teletele-Lin5 小时前
Miniconda安装与VSCode搭建远程Python、Jupyter开发环境
vscode·python·jupyter·环境配置·远程开发
AiTop1006 小时前
腾讯推出AI CLI工具CodeBuddy,国内首家同时支持插件、IDE和CLI三种形态的AI编程工具厂商
ide·人工智能·ai·aigc·ai编程
数字冰雹12 小时前
“图观”端渲染场景编辑器
人工智能·编辑器
android_xc13 小时前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
云梦谭13 小时前
Cursor 编辑器:面向 AI 编程的新一代 IDE
ide·人工智能·编辑器
zhong liu bin16 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue