Artefact de plug-in indispensable à VS Code (2023)

avant-propos

     En tant que développeur, vous êtes toujours à la recherche de solutions pouvant vous aider à améliorer votre flux de travail quotidien, et il existe de nombreuses excellentes extensions sur le marché de VS Code.

texte

Visual Studio Code est un éditeur de texte multiplateforme gratuit développé par Microsoft. En raison de ses excellentes performances et de ses fonctions riches, VSCode est sans aucun doute l'un des éditeurs de code léger les plus populaires sur le marché. VSCode est si puissant en raison de son marché de plug-ins. Un bon plug-in peut améliorer considérablement l'efficacité du développement de chacun. Ne dites pas de bêtises, utilisez simplement le plug-in !

Cet article continuera d'être mis à jour ! (Dernière mise à jour 2023.07.28)

Remarque : les plug-ins ne sont qu'auxiliaires, choisissez simplement celui qui vous convient, trop d'installations peuvent provoquer des conflits de plug-ins ou une consommation excessive de performances~

plug-in de base

1. " Langue chinoise (simplifiée) (chinois simplifié) "

      Pack de base de langue chinoise, aidez les étudiants qui ne sont pas bons en anglais ~

---

2.《Comment Traduire》

Passez la souris pour traduire après la sélection, plus besoin de copier et coller les traductions !

Remplacer la source de traduction Youdao :

• Ctrl+Maj+p, saisissez traduire dans la zone de recherche contextuelle, puis cliquez sur "Modifier la source de traduction".
• Sélectionnez "Plus" et téléchargez Youdao Translation dans la fenêtre contextuelle à droite.
• Modifier la configuration des paramètres une fois le téléchargement terminé

paramétrage des paramètres :

"commentTranslate.source": "DarkCWK.youdao-youdao",
 //此处的有道要提前下载有道翻译插件，其余翻译源有问题
 //当然如果你用的时候没有报错，可以直接用默认设置
 "commentTranslate.targetLanguage": "zh-CN"

 3.《Ouvrir dans le navigateur》

Étant donné que VSCode ne fournit pas d'interface intégrée pour ouvrir les fichiers directement dans le navigateur, ce plugin ajoute l'option d'afficher les fichiers dans le navigateur par défaut et l'option d'ouvrir le panneau de commande dans le client (Firefox, Chrome, IE) dans le menu des raccourcis.

 4. 《Serveur en direct》

Un petit serveur avec chargement en direct, qui peut être utilisé pour cracker html/css/javascript, mais pas pour déployer le site final. En d'autres termes, nous pouvons utiliser live-server comme serveur en temps réel pour afficher la page Web développée ou l'effet du projet en temps réel dans le projet.

De plus : Le projet "Live ServerPP" est issu de Live Server, qui ajoute les fonctions suivantes aux fonctions d'origine :

• Prend en charge le service de messagerie websocket, peut être utilisé pour déboguer le client websocket
• Prend en charge les fichiers virtuels programmables, qui peuvent être utilisés pour simuler des interfaces API côté serveur

5.《Coureur de code》

Ce plug-in doit être préinstallé avec node.js. Une fois le plug-in installé, il peut être exécuté directement dans l'environnement du nœud. Il y aura un petit bouton d'exécution en haut à droite du fichier .js. Après avoir cliqué, le résultat de l'exécution peut être affiché dans la console vscode. devoir!

6.《GitLens》

Fonction git améliorée, prise en charge de l'affichage de l'auteur, de l'heure de modification, etc. dans VSCode, un plug-in nécessaire. Bien sûr, pour les débutants, vous ne pouvez pas utiliser ce plugin pour vous familiariser avec les commandes git !

7.《icônes vscode》

Il existe de nombreux plugins d'icônes, et voici la bibliothèque d'icônes officielle produite par VSCode.

8. 《 Thème sombre d'Atom One 》 

Thème VSCode 100% louange, l'un des thèmes préférés de l'auteur !

De plus (recommandé de haut en bas):

• One Dark Pro : 1er téléchargement au monde !
• Dracula Official : Pas grand chose à dire, fan macho !
• Thème GitHub : palette de couleurs GitHub classique
• Monokai Pro : une série de thèmes et d'icônes attrayants, que vous pouvez changer !
• Ayu : Livré avec un thème d'icônes pour une sensation simple et détendue
• Thème matériel : Il y a une sorte de beauté avancée !
• Dainty : La version simplifiée du thème populaire VSCode est une grande collection ~
• One Monokai Theme : Une version combinée de Monokai et One Dark
• Thème Horizon : thème de couleur chaude rouge

9.《Tous les arbres》

Le plug-in de liste de tâches peut enregistrer des commentaires TODO dans la barre latérale et peut mettre en évidence les lignes de commentaires, les bonnes choses n'ont pas besoin d'être dites ~

Paramétrage rapide :

"todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug",
      "foreground": "#F56C6C",
      "type": "text"
    },
    "FIXME": {
      "icon": "flame",
      "foreground": "#FF9800",
      "type": "tag-and-comment"
    },
    "TODO": {
      "foreground": "#FFEB38",
      "type": "line"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#67C23A",
      "type": "whole-line"
    },
    "INFO": {
      "icon": "info",
      "foreground": "#909399",
      "type": "text-and-comment"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#409EFF",
      "type": "line"
    },
    "HACK": {
      "icon": "versions",
      "foreground": "#E040FB",
      "type": "line"
    },
    "XXX": {
      "icon": "unverified",
      "foreground": "#E91E63",
      "type": "line"
    }
},
"todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "INFO", "NOTE", "TAG", "XXX"]

 L'effet est comme indiqué sur la figure :

Plug-in de statistiques de temps

1.《Traqueur de codage》

Un plug-in qui enregistre votre temps de programmation dans VSCode, le plug-in doit pré-installer node.js.

Une fois le téléchargement terminé, appuyez sur les touches de raccourci ctrl + shift + p, une boîte de dialogue apparaîtra, entrez dans la boîte de dialogue pour afficher votre rapport d'enregistrement de programmation. 

 Après avoir exécuté le plugin, la page est la suivante :

 

2.《WakaTime》

Pour compter le temps passé à écrire du code dans VSCode, vous pouvez directement consulter le temps de programmation sur le site officiel. Fissure murale recommandée !

Étapes d'utilisation :

(1) Installez le plug-in WakaTime Après l'installation, le champ de saisie de la clé API s'affiche.

(Vous pouvez également configurer la clé api dans Preferences=>Packages Settings=>WakaTime=>settings-user)

(2) Connectez-vous au site officiel de wakaTime, connectez-vous et créez un compte, informations personnelles dans le coin supérieur droit => paramètres => copiez la clé API secrète.

(3) Si Python n'est pas installé sur le système, wakaTime ne peut pas fonctionner normalement et python doit être installé.

(4) Une fois l'installation réussie, vous pouvez vérifier votre propre temps de programmation sur le site officiel de WakaTime.

 

 

Plug-in d'efficacité du développement

1. 《Balise de fermeture automatique》

   Fermez automatiquement les balises HTML/XML, rien à dire, recommandé pour les fissures dans les murs !

1. 《Renommer automatiquement la balise》

   Complétez automatiquement la modification synchrone de l'étiquette de l'autre côté, il n'y a rien à dire, c'est recommandé pour les fissures murales !

1. 《Convertisseur de chaînes de modèles》

   Lorsque vous utilisez une chaîne de modèle qui sera automatiquement convertie en JavaScript dans une chaîne ${}, il n'est plus nécessaire de modifier manuellement les guillemets simples/doubles en backticks !

1. 《Plus joli - Formateur de code》

   Plugin de code de formatage automatique.

Modifier les paramètres :

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": false, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "terminal.integrated.allowMnemonics": true,
    //额外配置
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

Ou dans le chemin racine du projet, créez un nouveau fichier .prettierrc et ajoutez le contenu suivant au fichier :

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

Vous pouvez vous rendre directement sur le site officiel de Prettier Chinese pour des tests en ligne

1. 《Coup d'œil CSS》

   Utilisez pour Ctrl + 鼠标左键afficher rapidement les définitions CSS.

L'effet est comme indiqué sur la figure :

1. 《Vue Peek》

   CSS Peek ne prend pas en charge Vue, ce plugin prend en charge les fichiers Vue.

1. 《Facile MOINS》

   Il est utilisé pour générer des fichiers css ou wxss après avoir écrit moins de fichiers.

Certains paramètres peuvent être ajoutés selon vos préférences personnelles :

// Easy LESS配置
 "less.compile": {
      "compress": false,//是否压缩
      "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
      "out": true, // 是否输出css文件，false为不输出，千万不要是false
      "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss'
      // "outExt": ".css", // 输出文件的后缀,小程序可以写'.wxss'
 }

1.《Vue des extraits de VScode》

Vous pouvez créer des abréviations pour les extraits de code, ce qui permet de gagner beaucoup de temps de développement et de passer du temps sur la logique au lieu d'une syntaxe de modèle encombrante.

2.《Aperçu Regex》

Prévisualisez les effets des expressions régulières en temps réel.

3.《toute règle》

Le plug-in de génération d'expressions régulières développé par les Chinois, cliquez avec le bouton droit de la souris et sélectionnez l'expression régulière, et vous pouvez rechercher l'expression régulière souhaitée dans la zone de saisie contextuelle.

4.《CodeSi》

Codelf aide les développeurs à trouver des noms de variables existants qui correspondent à des mots-clés en recherchant les codes sources des projets des plateformes open source en ligne Github, Bitbucket, Google Code, Codeplex, Sourceforge et Fedora Project. Ce service de recherche prend en charge la recherche directe en chinois. codeif prend en charge la requête chinoise, saisit le sens chinois, codeif peut interroger les résultats qui répondent aux besoins autant que possible en fonction des besoins, et afficher les fragments de code et les bases de code qui prennent en charge divers langages de programmation liés aux résultats de la requête.

5.《Tabnine AI Autocomplete pour Javascript, Python, Typescript, PHP, Go, Java, Ruby et plus》

Augmentez la productivité grâce aux conseils d'experts d'un assistant de complétion de code IA auquel des millions de développeurs font confiance. Que vous soyez un nouveau développeur ou un professionnel chevronné, travaillant seul ou en équipe, l'assistant IA de Tabnine accélérera votre développement en complétant le code à l'aide de tous les langages de codage et IDE les plus populaires. (Les choses sont impermanentes, prenez cet endroit pour commémorer le cerf-volant)

6.《AWS Toolkit -- CodeWhisperer》

Amazon CodeWhisperer, l'assistant de programmation Amazon AI, est un outil pour aider les programmeurs à écrire du code plus rapidement et de manière plus sûre. Il peut fournir des suggestions de code en temps réel lorsque les développeurs appuient sur alt + c, et il est entièrement gratuit pour les utilisateurs individuels ! Lorsque vous l'utilisez, il vous suffit de faire un commentaire (l'anglais est le plus précis et le chinois est également pris en charge), ce qui correspond à votre demande, puis appuyez sur alt + c sous le commentaire pour obtenir des suggestions.

De plus, CodeWhisperer doit être enregistré lors de l'utilisation de CodeWhisperer.Le processus d'enregistrement est long et je ne les énumérerai pas ici ~ Après l'enregistrement, sélectionnez aws dans la barre latérale pour accéder à CodeWhisperer et sélectionnez Auto-Suggestions.

 Plugin d'invite intelligent

1.《Extraits de code ES7 React/Redux/GraphQL/React-Native》

Syntaxe Intellisense pour React/Redux/react-router.

2.《Hiver》

Plug-in d'intégration multifonctionnel Vue2, y compris : coloration syntaxique, invite intelligente, emmet, invite d'erreur, formatage, auto-complétion, débogueur. Le plugin Vue2 officiel de VSCode, un must pour les développeurs Vue2.

Si vous activez "editor.formatOnSave": true et utilisez ESLint en même temps, vous pouvez utiliser la configuration suivante pour éviter les conflits :

//解决保存后自动添加分号
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 // 在函数名称前加一个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
         "indent_with_tabs": false,
         "wrap_line_length": 150,
         // - auto: 仅在超出行长度时才对属性进行换行。
         // - force: 对除第一个属性外的其他每个属性进行换行。
         // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
         // - force-expand-multiline: 对每个属性进行换行。
         // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
         "wrap_attributes": "aligned-multiple"
     },
   },

3.《ESLint》

Basé sur le plugin VSCode, ESLint met en évidence les erreurs et nous aide automatiquement à corriger les erreurs via la configuration. Dans l'ensemble, ESLint est un outil de vérification et de correction du code JavaScript.

 Configuration simplifiée :

 //保存代码，不自动格式化
 "editor.formatOnSave": false,
 // 当保存的时候，eslint自动帮我们修复错误
 "editor.codeActionsOnSave": {
   "source.fixAll": true
 },

作者：lihouyi
链接：https://juejin.cn/post/7232240262402555962
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. 《Extraits de code JavaScript (ES6)》

   js (es6) des invites d'extraits de code et des complétions pour améliorer l'efficacité du développement. ​

2.  《Conseils de paramètres》

Demander le type de paramètre et le message de la fonction JavaScript. 

3.《composants de style vscode》 

Il existe des conseils intelligents lors de l'écriture de styles dans des fichiers JS.

4.《Prise en charge CSS HTML》

Nom et identifiant de la classe CSS de l'indice intelligent.

5.《Vérificateur orthographique du code》

L'objectif de ce correcteur orthographique est d'aider à détecter les fautes d'orthographe courantes des mots et peut détecter le cas de chameau. Un peu strict, les patients atteints de TOC peuvent choisir de ne pas le faire.

6.《Lentille d'erreur》 

 Lorsque nous entrons dans un mauvais format de grammaire, il y aura des indices !

7.《SonarLint》

Vous permet de résoudre les problèmes de codage avant qu'ils ne surviennent : comme un correcteur orthographique, SonarLint met en évidence les erreurs et les failles de sécurité au fur et à mesure que vous codez, et fournit des conseils clairs sur la correction afin que vous puissiez les corriger avant que votre code ne soit validé. SonarLint dans VS Code prend en charge l'analyse du code JavaScript, TypeScript, Python, Java, HTML et PHP. Invincible! 

8.《Extraits Axios》 

La génération en un clic du squelette axios peut fournir la complétion de code pour diverses requêtes initiées par axios. Il peut être utilisé au stade débutant.En développement réel, en raison du framework principalement utilisé, axios est rarement utilisé seul.

programmer un plug-in d'embellissement

1. 《Mettez en surbrillance la balise correspondante》

   Mettez en surbrillance les balises de début et/ou de fin correspondantes. Balisage officiellement pris en charge : HTML et JSX . D'autres styles (XML, Vue, Angular, PHP) fonctionneront également, mais ne sont pas garantis.

L'effet est comme indiqué sur la figure :

1. 《aperçu de l'image》

   Plugin d'image de prévisualisation, recommandé !

L'effet est comme indiqué sur la figure :

1. 《Aperçu Svg》

   Vous pouvez afficher vos images SVG et les éditer ~

L'effet est comme indiqué sur la figure :

1. 《Surbrillance des couleurs》

   Peut être utilisé pour styliser les couleurs CSS. En plus du CSS, il colore également les fichiers JavaScript, HTML, JSON, etc. qui n'affichent pas les couleurs par défaut. Le plugin teinte les noms de couleurs, RGB, RGBA et couleurs hexadécimales .

L'effet est comme indiqué sur la figure :

1. 《surbrillance-mode glace》

   Rendre la surbrillance plus visible lorsque le même code est sélectionné. Étapes de configuration : sélectionnez le plug-in téléchargé, cliquez sur les paramètres d'extension, puis modifiez les highlight-icemode.backgroundColoret à l'intérieur highlight-icemode.borderColorde la couleur que vous souhaitez définir. Ou ouvrez directement settings.json et ajoutez le code : "highlight-icemode.backgroundColor": "red", "highlight-icemode.borderColor": "blue"ok.

   Après avoir installé ce plugin, la mise en surbrillance fournie avec VSCode peut être désactivée : "editor.selectionHighlight": false.

1. 《arc-en-ciel》

   Tirages arc-en-ciel, qui dirait non à un petit arc-en-ciel ! Bien sûr, si vous n'aimez pas la couleur par défaut, vous pouvez l'ajuster dans les paramètres de l'extension. De plus, si vous n'aimez pas le petit arc-en-ciel, vous pouvez le remplacer par une ligne colorée !

1. 《Coloriseur de paires de parenthèses》

   Ce plugin peut coder par couleur les parenthèses appariées pour vous et fournir une ligne de connexion. Il nous convient de revoir la structure du code.

   Cependant, ce plug-in est actuellement obsolète . Nous pouvons @id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairspasser à l'interface de configuration correspondante en entrant : dans la barre de configuration, et la surbrillance peut être réalisée en cochant le contenu suivant

L'effet est comme indiqué sur la figure :

greffon de conversion de format

1. 《Aperçu Markdown amélioré》

   Une extension pour prévisualiser et éditer les fichiers Markdown. Il offre une multitude de fonctionnalités, notamment l'aperçu en temps réel, les styles CSS personnalisés, la prise en charge des formules mathématiques, la prise en charge des graphiques, l'exportation de PDF/HTML, etc. Cette extension prend également en charge la conversion de fichiers Markdown vers d'autres formats via Pandoc, et prend en charge la génération d'organigrammes et de diagrammes UML via des outils tels que Mermaid et PlantUML.

   Voici une introduction au processus de conversion de Markdown en PDF. Pour plus de détails, consultez le site officiel de MPE

   Étapes de conversion :

   (1) Cliquez sur l'option de fichier pour ouvrir le fichier md à convertir.

   (2) Le curseur de la souris reste sur le fichier md ouvert, 右键/ctrl+右键sélectionnez l'option [MPE : Ouvrir l'aperçu du côté].

   (3) Le curseur reste dans la zone d'aperçu à droite, 右键/ctrl+右键, sélectionnez Ouvrir dans le navigateur.

   (4) Dans la page de navigateur ouverte, ctrl+pla page d'impression s'affiche, sélectionnez "Enregistrer au format pdf" et vous pouvez définir si vous souhaitez ajouter des en-têtes et des pieds de page, un taux de zoom, etc. Cliquez ensuite sur enregistrer.

   La troisième étape est OK 右键, sélectionnez Chrome (Puppeteer), sélectionnez PDFet convertissez au format PDF

1. 《Booster JavaScript》

   Suggérez automatiquement des actions rapides pour refactoriser ou améliorer le code en analysant le code et son contexte. Il prend en charge plusieurs manipulations de code à partir des conditions de refactorisation, des déclarations, des fonctions, de TypeScript, des promesses, de JSX, etc. Faites juste attention à l'ampoule sur la gauche et appuyez dessus pour apprendre à traduire le code sous votre curseur.

L'effet est comme indiqué sur la figure :

Plugin de capture d'écran et de dessin

1. 《Intégration Draw.io》

   Ce plug-in intègre les fonctions de draw.io dans VSCode et les regroupe dans un plug-in que les développeurs peuvent télécharger et utiliser. Vous pouvez utiliser VSCode pour dessiner directement des organigrammes, des cartes mentales et des diagrammes UML parfaits ! Fissure murale recommandée ! ! !

   Utilisation du plug-in : créez un nouveau fichier de document, modifiez le suffixe en drawio, puis utilisez VSCode pour ouvrir le fichier.

Page de dessin :

1. 《Polacode》

   Outil de capture d'écran de code, ouvrez la page d'édition de code, puis appuyez sur Ctrl + Shift + P, entrez polacode. Shift + TabAprès l'ouverture, copiez et collez le bloc de code dans l'interface du plug-in ouvert. S'il y a un problème avec le format, vous pouvez d'abord utiliser l'indentation inversée à l'extrême gauche dans VSCode , puis le copier. (Recommandez un outil de capture d'écran de code de version Web : Codepng )

L'effet est comme indiqué sur la figure :

Auteur : Yaonan
Le droit d'auteur appartient à l'auteur. Pour une réimpression commerciale, veuillez contacter l'auteur pour autorisation, pour une réimpression non commerciale, veuillez indiquer la source.