2022년 프런트엔드 초보자를 위한 꼭 읽어야 할 VSCode 공통 플러그인 및 유용한 구성 요약

이 글은 일반적으로 사용되는 일부 VSCode 플러그인과 유용한 구성을 요약하고 공유합니다(매우 상세함). 이 글은 프런트엔드 초보자에게 꼭 읽어야 할 내용입니다.

저는 1년 넘게 프론트엔드를 배워왔는데, vscode는 주요 개발 도구로 처음부터 저와 함께 했습니다. 이를 통해 저는 다양한 플러그인과 일부 구성도 접하게 되었습니다. 그런 점에서 vscode 플러그인과 몇 가지 활용법을 소개하는 글을 쓰고 싶습니다. 프론트엔드 피트를 처음 접하는 친구들에게 조금이나마 도움이 되기를 바랍니다. 이 기사는 매우 길기 때문에 독자들이 인내심을 갖고 읽어보시기 바랍니다.

1. 2022년 VSCode용 자주 사용되는 플러그인 추천

일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 합니다. 이 기사에서는 일부 프런트엔드 보급형 플러그인을 소개하고, 이러한 플러그인의 작성자가 이를 사용하고 일부 유사한 플러그인과 비교한 후 플러그인이 적극적으로 유지 관리되는지 여부에 따라 권장합니다. [추천 학습: "vscode 입문 튜토리얼"]

참고: 이 플러그인은 주로 注意：这些插件主要以前端这块来讲，并且不涉及像vue,react等框架的一些插件，同时也不会讲c++,python等。

插件清单

• Chinese (Simplified) (简体中文)

• Auto Rename Tag

• open in browser

• Prettier - Code formatter

• Live Server

• Path Intellisense

• Image preview

• Code Spell Checker

• Better Comments

• Easy LESS

• Sass

• Live Sass Compiler

• jQuery Code Snippets

• 14.JavaScript (ES6) code snippets

• One Dark Pro

• Material Theme

• Tokyo Night

• Material Icon Theme

• vscode-icons

01- 实用扩展推荐

1.Chinese (Simplified) (简体中文)

• 适用于 VS Code 的中文（简体）语言包

不用多说，英语不太好的小伙伴必装的汉化插件，英语好的可以略过。

2.Auto Rename Tag

• 同步修改 HTML/XML标签

3.open in browser

• 提供右键菜单选项，一键在浏览器打开html文件。

可以选择在默认浏览器打开或者选择自己想用的浏览器打开

4.Prettier - Code formatter

• 最流行的前端代码格式化利器

在设置中把在保存时格式化文件勾上，就可以ctrl+s保存后格式化文件，不管写的再乱，代码都能变得整齐划一。我们也可以根据自己的喜好，配置相关的的设置，比如缩进，前端的话像html,css,js等都建议缩进两个单位。

这是一些常用的配置，记住放在settings.json프론트 엔드

에 중점을 두고 있으며 vue와 같은 내용은 포함하지 않습니다. >, React와 같은 프레임워크용 일부 플러그인이 있지만 c++, python 등을 말하는 방법도 모릅니다.

플러그인 목록

중국어(간체) (简体中文)

태그 자동 이름 바꾸기

브라우저에서 열기

Prettier - 코드 포맷터

Live Server

🎜Path Intellisense🎜🎜🎜🎜Image 미리보기 🎜🎜🎜🎜코드 맞춤법 검사기🎜 ㅋㅋㅋ 스크립트(ES6) 코드 조각 s🎜🎜🎜🎜One Dark Pro 🎜🎜🎜 🎜Material Theme🎜🎜🎜🎜🎜🎜🎜🎜Tokyo Night🎜🎜🎜🎜Material Icon Theme🎜🎜🎜🎜vscode-icons🎜🎜🎜🎜🎜01 - 실용적인 확장 권장 사항 🎜🎜🎜🎜1.중국어(간체)(간체 중국어)🎜🎜🎜🎜VS Code용 중국어(간체) 언어 팩🎜🎜🎜🎜🎜말할 필요도 없이 친구들이 사용하는 중국 플러그인입니다. 영어를 잘 못하는 사람은 꼭 설치하세요. 🎜🎜🎜2.태그 자동 이름 바꾸기🎜🎜🎜🎜HTML/XML 태그를 동기화하여 수정🎜🎜🎜🎜🎜🎜🎜🎜3.open in browser🎜🎜🎜🎜은 한 번의 클릭으로 브라우저에서 html 파일을 열 수 있는 마우스 오른쪽 버튼 클릭 메뉴 옵션을 제공합니다. 🎜🎜🎜🎜🎜 기본 브라우저에서 열거나 사용하려는 브라우저를 선택할 수 있습니다🎜🎜🎜🎜🎜4.Prettier - 코드 포맷터🎜🎜🎜🎜가장 인기 있는 프런트 엔드 코드 포맷 도구🎜🎜🎜🎜🎜설정에서 "저장 시 파일 형식 지정" 확인란을 선택하세요. 저장한 후 ctrl+s 파일 형식을 지정할 수 있습니다. 코드가 아무리 지저분하더라도 코드는 깔끔하고 일관되게 유지됩니다. 들여쓰기의 경우 html, css, js 등과 같은 관련 설정을 원하는 대로 구성할 수도 있습니다. 모두 두 단위 들여쓰기를 권장합니다. 🎜🎜🎜🎜이것 이는 일반적으로 사용되는 몇 가지 구성입니다. settings.json🎜

{
  "printWidth": 130,// 最大换行长度
  "tabWidth": 2, // 保存后缩进单位
    "[html][css][less][scss][javascript][typescript][json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序
    "editor.tabSize": 2 // 编辑时缩进单位
  },
}

🎜🎜5의 바깥쪽 중괄호 안에 넣어야 합니다. Live Server🎜🎜🎜🎜실시간 로컬 서버 열기🎜🎜🎜🎜 🎜🎜 매우 사용하기 쉬운 플러그인입니다. 파일을 저장할 때마다 브라우저를 새로 고쳐야 최신 변경 사항을 볼 수 있습니다. 이 플러그인을 사용하면 파일의 변경 사항을 실시간으로 모니터링할 수 있습니다. 자동으로 새로고침이 되어 정말 사용하기 쉽습니다. 이 플러그인을 개발한 작성자에게 정말 감사하다는 말씀을 전하고 싶습니다. 🎜🎜🎜🎜🎜🎜6.Path Intellisense🎜🎜🎜🎜지능형 경로 완성🎜🎜🎜🎜🎜

之前这个插件好久都没人维护，但最近的一段时间，经常可以看到插件的更新，也对比了一些同类插件，这个插件还是很优秀的。

7.Image preview

• 鼠标悬停可以预览图片

鼠标悬停可以预览图片，显示图片的大小和尺寸。不仅仅在css中，也可以在js、vue等文件中预览哦，可以打开对应的文件夹和项目文件为位置，真的强烈推荐！

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

8.Code Spell Checker

• 一个基本的拼写检查器，可以很好地与驼峰大小写代码配合使用。

9.Better Comments

• 写出更个性化的注释

10.Easy LESS

实时编译less到css

11.Sass

写sass/scss文件必装的插件

12.Live Sass Compiler

实时编译sass/scss到css

13.jQuery Code Snippets

jquery代码提示

14.JavaScript (ES6) code snippets

es6等代码块，语法提示

02-外观美化插件推荐

1.主题插件

• One Dark Pro 最受欢迎的暗黑主题

  
  

• Material Theme 拥有非常多的主题，都很不错，也是有名的主题插件

  
  

• Tokyo Night 本人在用的一款主题，特别喜欢，不刺眼，色彩设计的很合理

  
  

• ......

2.文件图标

• Material Icon Theme 拥有超多的文件图标，色彩饱和度高。

  
  

• vscode-icons 也是非常不错的文件图标，下载量很高

  
  

二、VSCode常用快捷键

VSCode 内置很多快捷键，可以大大的提高我们的开发效率。注意：这个快捷键都是可以自定义的，这里我们主要说说一些好用的默认快捷键。

这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧 https://www.bilibili.com/read/cv9699783

三、VSCode一些好用的配置

01-彩虹括号

以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2，但是会产生性能问题，着色慢。vscode在2021 年 8 月（1.60 版）开始内置了这个功能，随之到来的还有垂直连线，亲测，现在已经非常好用了，效果出色，并且所有颜色都是可主题化的，最多可以配置六种颜色。

在如下打开settings.json，记住放在最外层的大括号里。

这是我认为比较好的配置，详细的配置可以参考vscode官方文档：

https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization

 "editor.bracketPairColorization.enabled": true,
 "editor.guides.bracketPairs": "active",

02-javaScript参数名称提示

vscode在2021 年 8 月（1.60 版）中加入**JavaScript/TypeScript 嵌入提示**- 参数名称和类型的内联提示等，此设置不会自动打开，也就是说也是需要我们手动去配置的。总所周知，javaScript是弱类型语言，这些提示可以简单的帮助我们做一些错误检查，同时也让代码更直观、好看。

这是我的一些配置，详细的配置说明可以参考vscode官方文档：

https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript

  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.variableTypes.enabled": false,

至此，本文结束。创作不易，本人第一次写博客，如果本篇文章对你有所帮助，希望可以点个赞，给个关注。

更多关于VSCode的相关知识，请访问：vscode教程！！

위 내용은 2022년 프런트엔드 초보자를 위한 꼭 읽어야 할 VSCode 공통 플러그인 및 유용한 구성 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!