如何在新项目中配置eslint

置顶标题只用h1

已于 2022-04-28 10:38:30 修改

阅读量1.3k

点赞数 3

文章标签： vue.js react.js javascript

于 2021-11-17 21:43:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_58089129/article/details/121388188

版权

本文介绍如何在VSCode中配置ESLint和Prettier插件以实现代码检查与格式化功能，包括安装相关插件、初始化ESLint及设置vscode的工作区配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：使用npm 下载eslint 包和相关vscode插件

1.1在项目中先安装依赖包

npm i eslint -D

1.2 在vscode中下载 eslint 、 Prettier Now 这两个插件，安装好以后，重启vscode

第二步: 使用npx命令配置相关插件

npx eslint --init

2.1 先选代码风格和一些设置，按照下图一个一个选：

2.2 在点vscode的设置设置工作区，然后CV下面的代码：

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
 
  // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",
 
  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数
  
  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,
 
  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行
 
  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  
}

然后重启vsocd，只要页面出现报错，就Ctrl+s重新保存一下就不会报错了。