搜索
首页开发工具VSCode浅析在vscode中怎么用eslint和prettier

浅析在vscode中怎么用eslint和prettier

Jan 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删除
Visual Studio:代码编译,测试和部署Visual Studio:代码编译,测试和部署Apr 24, 2025 am 12:05 AM

在VisualStudio中,代码编译、测试和部署的步骤如下:1.编译:使用VisualStudio的编译器选项将源代码转化为可执行文件,支持多种语言如C#、C 和Python。2.测试:利用内置的MSTest和NUnit等框架进行单元测试,提高代码质量和可靠性。3.部署:通过Web部署、Azure部署等方式,将应用程序从开发环境转移到生产环境,确保安全性和性能。

Visual Studio:综合开发环境简介(IDE)Visual Studio:综合开发环境简介(IDE)Apr 23, 2025 am 12:02 AM

VisualStudioisMicrosoft'sflagshipIDE,supportingmultipleprogramminglanguagesandenhancingcodingefficiency.1)ItoffersfeatureslikeIntelliSenseforcodeprediction,multi-tabbedinterfaceforprojectmanagement,andtoolsfordebugging,refactoring,andversioncontrol.2

Visual Studio:探索免费和付费产品Visual Studio:探索免费和付费产品Apr 22, 2025 am 12:09 AM

VisualStudio的免费版和付费版的主要区别在于功能的丰富程度和支持的服务。免费版(Community)适用于个人开发者和小型团队,提供基本开发工具;付费版(Professional和Enterprise)则提供高级功能,如高级调试和团队协作工具,适合大型项目和企业级开发。

Visual Studio社区版:解释的免费选项Visual Studio社区版:解释的免费选项Apr 21, 2025 am 12:09 AM

VisualStudioCommunityEdition是一款免费的IDE,适合个人开发者、小型团队和教育机构。1)它提供代码编辑、调试、测试和版本控制等功能。2)基于Roslyn编译器平台,支持多种编程语言并集成Git和TFVC。3)高级功能包括单元测试,优化建议包括关闭不必要的扩展和使用轻量级编辑器。

视觉工作室:轻松构建应用程序视觉工作室:轻松构建应用程序Apr 20, 2025 am 12:09 AM

VisualStudio是由微软开发的集成开发环境(IDE),支持多种编程语言,包括C#,C ,Python等。1.它提供了智能感知(IntelliSense)功能,帮助快速编写代码。2.调试器允许设置断点,逐步执行代码,找出问题。3.对于初学者,创建简单的控制台应用程序是入门的好方法。4.高级用法包括项目管理和依赖注入等设计模式的应用。5.常见错误可以通过调试工具逐步解决。6.性能优化和最佳实践包括代码优化、版本控制、代码质量检查和自动化测试。

Visual Studio和VS代码:了解其关键差异Visual Studio和VS代码:了解其关键差异Apr 19, 2025 am 12:16 AM

VisualStudio适合大型项目和企业级应用开发,VSCode则适合快速开发和多语言支持。1.VisualStudio提供全面的IDE环境,支持微软技术栈。2.VSCode是轻量级编辑器,强调灵活性和扩展性,跨平台支持。

视觉工作室仍然免费吗?了解可用性视觉工作室仍然免费吗?了解可用性Apr 18, 2025 am 12:05 AM

是的,VisualStudio某些版本是免费的。具体来说,VisualStudioCommunityEdition对个人开发者、开源项目、学术研究和小型组织免费。然而,也有付费版本如VisualStudioProfessional和Enterprise,适用于大型团队和企业,提供额外功能。

使用Visual Studio:跨平台开发软件使用Visual Studio:跨平台开发软件Apr 17, 2025 am 12:13 AM

使用VisualStudio进行跨平台开发是可行的,通过支持.NETCore和Xamarin等框架,开发者可以编写一次代码并在多个操作系统上运行。1)创建.NETCore项目并使用其跨平台能力,2)使用Xamarin进行移动应用开发,3)利用异步编程和代码重用来优化性能,确保应用的高效运行和可维护性。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具