[Compilation et résumé] Plugins couramment utilisés et configurations utiles de VSCode (une lecture incontournable pour les débutants)

Cet article résume et partage avec vous quelques plug-ins couramment utilisés et configurations utiles de VSCode (super détaillés) J'espère qu'il pourra aider les amis qui débutent dans le front-end. Cet article est très long. Si vous le lisez attentivement, vous y gagnerez certainement.

1. Plug-ins couramment utilisés recommandés pour VSCode

Si vous voulez bien faire votre travail, vous devez d'abord affûter vos outils. Cet article présente quelques plug-ins front-end d'entrée de gamme. Les auteurs de ces plug-ins les ont utilisés, les ont comparés à certains plug-ins similaires et les ont recommandés en fonction de leur maintenance active.

Note : Ces plug-ins sont principalement axés sur le 注意：这些插件主要以前端这块来讲，并且不涉及像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

【推荐学习：vscode教程、编程教学】

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.jsonfront-end

Liste des plug-ins

• Chinois (simplifié ) (Chinois simplifié)



Tag de renommage automatique

ouvrir dans le navigateur

Prettier - Formateur de code

• Live Server



Path Intellisense

Aperçu de l'image

Code Vérificateur orthographique

🎜🎜🎜Meilleurs commentaires🎜🎜🎜🎜Facile LESS🎜🎜🎜🎜Sass🎜🎜🎜🎜Live Sass Compiler🎜🎜🎜🎜jQuery Code Snippets🎜🎜🎜 🎜1 4.Extraits de code JavaScript (ES6) 🎜🎜🎜🎜 One Dark Pro 🎜🎜🎜🎜Thème matériel🎜🎜🎜🎜Tokyo Night🎜🎜🎜🎜Thème d'icônes matérielles🎜🎜🎜🎜vscode-icons🎜🎜🎜🎜【Apprentissage recommandé : tutoriel vscode, Enseignement de la programmation]🎜🎜🎜01- Recommandations pratiques d'extension🎜🎜🎜🎜1.简体中文) 🎜🎜🎜🎜Pack de langue chinois (simplifié) pour VS Code🎜🎜🎜🎜🎜Inutile de dire qu'il s'agit d'un plug-in chinois incontournable pour les amis qui ne sont pas très bons en anglais. Si vous êtes bon en anglais, vous pouvez sauter. il. 🎜🎜🎜2.Renommer automatiquement la balise🎜🎜🎜🎜Modifier de manière synchrone les balises HTML/XML🎜🎜🎜🎜🎜🎜🎜🎜3.ouvrir dans le navigateur🎜🎜🎜🎜 fournit des options de menu contextuelles pour ouvrir les fichiers HTML dans le navigateur en un seul clic. 🎜🎜🎜🎜🎜 Vous pouvez choisir de l'ouvrir dans le navigateur par défaut ou choisir le navigateur que vous souhaitez utiliser🎜🎜🎜🎜🎜4.Prettier - Formateur de code🎜🎜🎜🎜L'outil de formatage de code frontal le plus populaire🎜🎜🎜🎜🎜Dans les paramètres, cochez la case "Formater le fichier lors de l'enregistrement" , vous pouvez alorsctrl+sFormater le fichier après l'avoir enregistré, peu importe à quel point il est compliqué, le code deviendra soigné et cohérent. Nous pouvons également configurer les paramètres associés selon nos propres préférences, tels que l'indentation pour le front-end, html, css, js, etc. sont tous recommandés. Indentez deux unités. 🎜🎜🎜🎜Ceci Voici quelques configurations couramment utilisées. N'oubliez pas de les mettre dans les accolades extérieures de settings.json🎜

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

Copier après la connexion
🎜🎜5 Live Server🎜🎜🎜🎜Ouvrez un serveur local en temps réel🎜🎜🎜🎜. 🎜🎜 Un plug-in très simple à utiliser. Chaque fois que vous enregistrez un fichier, vous devez actualiser le navigateur pour voir les dernières modifications. Avec ce plug-in, vous pouvez surveiller les modifications apportées au fichier en temps réel et. actualiser automatiquement. Il est vraiment facile à utiliser. Je tiens vraiment à remercier l'auteur qui a développé ce plug-in. 🎜🎜🎜🎜🎜🎜6.Path Intellisense🎜🎜🎜🎜Achèvement intelligent du chemin🎜🎜🎜🎜🎜🎜Ce plug-in n'a pas été maintenu depuis longtemps, mais ces derniers temps, vous pouvez souvent voir des mises à jour du plug-in et comparez-les Parmi les plug-ins similaires, ce plug-in est toujours excellent. 🎜🎜🎜🎜🎜🎜7.Aperçu de l'image🎜🎜
• 鼠标悬停可以预览图片



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



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

Copier après la connexion

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",

Copier après la connexion

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,

Copier après la connexion

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!