搜索
首页开发工具VSCode浅析在vscode中怎么用eslint和prettier
浅析在vscode中怎么用eslint和prettierJan 04, 2022 pm 06:56 PM
eslintprettiervscode

vscode中怎么用eslint和prettier?下面本篇文章给大家介绍一下vscode中的eslint用法、eslint 与 prettier 结合使用,希望对大家有所帮助!

浅析在vscode中怎么用eslint和prettier

1. vscode中eslint的使用

1)首先在vscode中安装eslint,然后在vscode的settings.json添加如下代码

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2)必须在项目中安装eslint(或者全局安装)

这个是vscode中eslint插件的要求:【推荐学习:《vscode入门教程》】

1.png

3)在根目录中添加 .eslintrc.js 文件,添加如下代码

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4)rules 里面的设置

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']
  • 属性值数组中第一个元素设置

2.png

  • 属性值数组中第二个元素设置

eslint.bootcss.com/docs/rules/ 找到对应属性点击进入,然后找到options

  • eslint:recommended 默认规则的都有标记

3.png

注意: 此时项目就会按照默认设置,以及rules里面的规则进行提示,保存时也会根据eslint的规则就行格式化。

2. eslint 与 prettier 结合使用

(注:eslint与prettier的结合视情况而定,不是非得要与prettier一起使用)

1)首先在vscode中安装prettier插件,然后在vscode中的 settings.json 里面添加下面的代码

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2)在项目中安装prettier

4.png

同时还需要安装eslint-plugin-prettiereslint-config-prettier,这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示(注意这两个插件的版本号问题,最新的 eslint-plugin-prettier 的4.0版本使用时有问题) 

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

实际上做了下面的事情

5.png

然后就可以在根目录下添加.prettierrc.js 文件,eslint将按照里面的规则进行提示,同时保存的时候也会按照里面的规则进行格式化

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3. 在vue项目中使用prettier规则

1)首先在创建的时候选择eslint + prettier的设置

6.png

7.png

2)在根目录下创建 .prettierrc.js,并添加规则

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

默认情况下,当代码中的格式不正确时,会是warn警告

8.png

如果需要把它变成error,需要在.eslintrc.js中添加如下代码

rules: {
//…
  'prettier/prettier': 'error'
}

此时效果如下

9.png

注: 在修改完一些配置后,vscode可以不会马上生效,此时可以关闭项目,重新打开试试

更多关于VSCode的相关知识,请访问:vscode教程!!

以上是浅析在vscode中怎么用eslint和prettier的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:掘金社区。如有侵权,请联系admin@php.cn删除
手把手带你会习VSCode debug,不信你还不会!手把手带你会习VSCode debug,不信你还不会!Mar 31, 2022 pm 08:45 PM

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

浅析VSCode怎么关闭自动更新浅析VSCode怎么关闭自动更新Jun 02, 2022 pm 12:56 PM

VSCode怎么关闭自动更新?下面本篇文章给大家介绍一下VSCode关闭自动更新的方法,希望对大家有所帮助!

手把手带你在VSCode中配置 Geant4 和 Root手把手带你在VSCode中配置 Geant4 和 RootApr 25, 2022 pm 08:57 PM

本篇是VSCode配置文章,手把手教大家怎么在VSCode​中配置使用 Geant4 和 Root,希望对大家有所帮助!

23个提高开发效率的前端VSCode插件(快来收藏)23个提高开发效率的前端VSCode插件(快来收藏)Jul 25, 2022 pm 08:06 PM

本篇文章给大家分享23个前端VSCode插件,助你提高开发效率,让你事半功倍,快来收藏吧!

扒一扒vscode Prettier选项中的16个实用属性,让代码变美!扒一扒vscode Prettier选项中的16个实用属性,让代码变美!May 03, 2022 am 10:00 AM

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

总结分享12个好玩有趣的 VSCODE 插件总结分享12个好玩有趣的 VSCODE 插件May 27, 2022 am 11:06 AM

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

手把手教你在VScode中配置C/C++环境(Win下)手把手教你在VScode中配置C/C++环境(Win下)Oct 10, 2022 pm 06:52 PM

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具