Cet article a téléchargé et installé vscode par défaut, principalement pour résoudre les problèmes de configuration des variables d'environnement et de compilation des fichiers de tâches et de lancement.
J'ai moi-même essayé de nombreux blogs et je l'ai finalement configuré avec succès grâce à cette méthode.
Lors de la configuration de vscode sous Linux (ubuntu 20.04), vous pouvez accéder directement à la tâche de configuration et lancer les fichiers. Il n'est pas nécessaire de télécharger mingw et de configurer les variables d'environnement. Il vous suffit de télécharger gcc et g++ dans le terminal.
Ouvrez le terminal dans le système Linux : exécutez les deux instructions suivantes et passez directement à la tâche de configuration et lancez les fichiers après le téléchargement. Le contenu des fichiers de lancement de Windows et Linux est différent. Les configurations de tâches et de lancement Linux sont ajoutées au bas du document.
$sudo apt-get install g++
$sudo apt-get install gcc
Les fenêtres:
1. Téléchargez l'adresse de téléchargement MinGW
Mingw :
Téléchargez le package compressé - ×86_64-posix-sjlj
(puis déplacez l'antidote vers le dossier spécifié, aucune installation n'est requise, mais vous devez configurer les variables d'environnement du dossier bin)
Le téléchargement depuis le site officiel est lent.
Vous pouvez le télécharger depuis le site Web national
. L'image après décompression est la suivante :
Entrez le répertoire bin et copiez le répertoire du fichier bin. Par exemple, voici D:\binbin-download\mingw64\bin
Configurer les variables d'environnement : entrez les variables d'environnement dans la zone de recherche Windows et elles apparaîtront
Touche de raccourci win+R pour ouvrir cmd et exécuter gcc -v ou g++ -v
Lorsque cette boîte de dialogue apparaît et affiche enfin la version de gcc, cela prouve que les variables d'environnement sont configurées avec succès.
Ouvrez vscode, cliquez sur Extensions, recherchez c/c++, chinois, code runner en haut et téléchargez les plug-ins c/c++ et chinois. (Le premier sur la photo est bien)
L'étape clé est ici. Créez d'abord un dossier nommé Code pour stocker le code c/c++, puis créez un .vscode dans le dossier Code, puis créez un fichier de test c/c++ test dans le répertoire racine de Code. cpp,
Comme le montre la figure (configuration derrière le fichier en .vscode)
#include <stdio.h>
#include<iostream>
using namespace std;
int main()
{
printf("Hello World\n");
return 0;
}
Entrez dans l'interface de débogage pour ajouter l'environnement de configuration, sélectionnez C++ (GDB/LLDB), puis sélectionnez g++.exe. Le fichier de configuration launch.json sera automatiquement généré. S'il implique le chemin de mingw, remplacez-le par le nom du chemin. du fichier dans votre propre mingw. .
Configurez trois fichiers JSON dans le répertoire .vscode de vscode.
Ouvrez vscode et appuyez sur Ctrl+Shift+p. Cliquez dans la case rouge pour générer le dossier .vscode.
Ou créez deux dossiers directement ici
Configurez ensuite task_json, launch_json
tâche_json :
{
"tasks": [
{
"type": "shell",
"label": "C/C++: g++.exe 生成活动文件",
"command": "C:\\Install\\develop\\mingw64\\bin\\g++.exe",//改成自己g++的路劲名
"args": [
"-fdiagnostics-color=always",
"-g",
"${file}",
"-o",
"${fileDirname}\\${fileBasenameNoExtension}.exe"
],
"options": {
"cwd": "${fileDirname}"
},
"problemMatcher": [
"$gcc"
],
"group": {
"kind": "build",
"isDefault": true
},
"detail": "调试器生成的任务。"
}
],
"version": "2.0.0"
}
lancement.json :
{
"version": "0.2.0",
"configurations": [
{
"name": "C++",
"type": "cppdbg",
"request": "launch",
"program": "${fileDirname}\\${fileBasenameNoExtension}.exe",
"args": [],
"stopAtEntry": false,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": true, //修改此项，让其弹出终端
"MIMode": "gdb",
"miDebuggerPath": "C:\\Install\\develop\\mingw64\\bin\\gdb.exe",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
],
"preLaunchTask": "C/C++: g++.exe 生成活动文件" //将此项修改成task.json一样
}
]
}
c_cpp_properties.json
{
"configurations": [
{
"name": "Win64",
"includePath": ["${workspaceFolder}/**"],
"defines": ["_DEBUG", "UNICODE", "_UNICODE"],
"windowsSdkVersion": "10.0.17763.0",
"compilerPath": "D:\\Install\\Programs\\mingw64\\bin\\g++.exe", /*修改成自己bin目录下的g++.exe，这里的路径和电脑里复制的文件目录有一点不一样，这里是两个反斜杠\\*/
"cStandard": "c11",
"cppStandard": "c++17",
"intelliSenseMode": "${default}"
}
],
"version": 4
}
paramètres.json
{
"C_Cpp.errorSquiggles": "disabled",
"files.associations": {
"iostream": "cpp",
"ostream": "cpp"
}
}
Paramètres utilisateur VScode
- Ouvrir les paramètres
Fichier – Préférences – Paramètres, ouvrez les paramètres utilisateur. VScode prend en charge la sélection de configurations et la modification du fichier settings.json pour modifier la configuration par défaut. Personnellement, je préfère configurer en écrivant json. Mon code de configuration personnel est joint ci-dessous.
Voici quelques éléments de configuration courants :
(1) editor.fontsize est utilisé pour définir la taille de la police.Vous pouvez définir editor.fontsize: 14;
(2) L'attribut files.autoSave indique si le fichier est automatiquement enregistré. Il est recommandé de le définir sur onFocusChange - enregistrer automatiquement lorsque le focus du fichier change.
(3) editor.tabCompletion est utilisé pour remplir automatiquement la meilleure valeur recommandée lorsque la touche Tab est enfoncée lorsque la valeur recommandée apparaît. Le paramètre recommandé est activé ;
(4) L'attribut source.organizeImports dans editor.codeActionsOnSave. Cet attribut peut ajuster automatiquement l'ordre des instructions d'importation lors de l'enregistrement, permettant ainsi à vos instructions d'importation d'être classées par ordre alphabétique. Il est recommandé de le définir sur true, c'est-à-dire " editor.codeActionsOnSave" : { "source.organizeImports": true };
(5) editor.lineNumbers définit le numéro de ligne de code, c'est-à-dire editor.lineNumbers : true ;
Ma configuration personnelle pour référence :
{
"files.associations": {
"*.vue": "vue",
"*.wpy": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
"git.enableSmartCommit": true,
"git.autofetch": true,
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"wpy": "html"
},
//主题颜色
//"workbench.colorTheme": "Monokai",
"git.confirmSync": false,
"explorer.confirmDelete": false,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"editor.wordWrap": "on",
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
//失去焦点后自动保存
"files.autoSave": "onFocusChange",
// #值设置为true时，每次保存的时候自动格式化；
"editor.formatOnSave": false,
//每120行就显示一条线
"editor.rulers": [
],
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/target": true,
"**/logs": true,
},
// 这些文件将不会显示在工作空间中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
},
"**/node_modules": true
},
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
}
}
Récemment, les gens me demandent souvent sur WeChat, où est écrit ce code de configuration ?
La nouvelle version des paramètres vscode est par défaut les paramètres de l'interface utilisateur au lieu des paramètres json précédents. Si vous souhaitez copier mon code ci-dessus pour la configuration, vous pouvez apporter les modifications suivantes
Fichier>Préférences>Paramètres> Recherchez workbench.settings.editor, sélectionnez json pour modifier les paramètres json ;
Désactiver les mises à jour automatiques
Fichier > Préférences > Paramètres (macOS : Code > Préférences > Paramètres, recherchez le mode de mise à jour et modifiez le paramètre sur aucun.
Activer les paramètres d'indication de code
Étape 1 : Cliquez sur l'icône des paramètres dans le coin inférieur gauche, recherchez et cliquez sur « paramètre ».
Étape 2 : Recherchez « empêcher » dans la zone de recherche -> et décochez cet élément.
Touches de raccourci couramment utilisées
Pour utiliser vscode efficacement, il est essentiel de se souvenir de certaines touches de raccourci couramment utilisées. J'ai répertorié pour vous quelques touches de raccourci couramment utilisées dans le travail quotidien.
Ce qui suit est principalement basé sur Windows. Ctrl dans Windows peut être remplacé par Command sous Mac.
Pour les opérations sur les lignes :
Rouvrir une ligne : Si le curseur est en fin de ligne, appuyez simplement sur Entrée ; s'il n'est pas en fin de ligne, ctrl + entrée rouvrira une ligne vers le bas ; ctrl + maj + entrée rouvrira une ligne sur le ligne précédente et supprimer une ligne : lorsque le curseur n'a aucun contenu sélectionné
, CTRL
+
_ Copier une ligne vers le haut
ctrl + z pour revenir en arrière et
opérer sur les mots :
- Sélectionnez un mot : ctrl + d
pour rechercher ou remplacer :
ctrl + f : rechercher
ctrl + alt + f : remplacer
ctrl + shift + f : rechercher dans le projet
Ctrl + ` peut ouvrir ou fermer le terminal
Ctrl+P ouvre rapidement les fichiers récemment ouverts
Ctrl+Shift+N Ouvrir une nouvelle fenêtre d'éditeur
Ctrl+Maj+W fermer l'éditeur
Accueil Le curseur passe au début de la ligne
Fin Le curseur passe à la fin de la ligne
Ctrl + Accueil Aller en haut de la page
Ctrl + Fin Aller à la fin de la page
Ctrl + Maj + [Réduire le code de région
Ctrl + Maj + ] développer le code de région
Ctrl + / Ajouter un commentaire de fin de ligne
Maj + Alt + Une annotation de zone de bloc
Installation du plug-in
Saisissez le nom du plug-in que vous souhaitez installer dans la zone de saisie et cliquez sur Installer. Il n'y a aucun effet après l'installation, vous pouvez redémarrer vscode
Plug-ins essentiels :
1. Afficher dans le navigateur
Indispensable pour prévisualiser les pages Web dans le navigateur. Exécutez le fichier html
2, vscode-icons
pour changer l'icône du fichier dans l'éditeur
3. Bracket Pair Colorizer
ajoute différentes couleurs à divers supports imbriqués.
4. La balise de renommage automatique
modifie automatiquement les balises HTML correspondantes.
5. Chemin d'accès intelligent Intellisense
vous invite intelligemment lorsque vous entrez le chemin du fichier.
6. Markdown Preview
prévisualise la démarque en temps réel.
7. stylelint
CSS / SCSS / Moins de vérification grammaticale
8. Import Cost
introduit le calcul de la taille du package, ce qui est très utile pour contrôler le volume du projet après l'emballage.
9. Prettier
est un plug-in de formatage de code plus utile que Beautify.
Mise en évidence de la syntaxe du plug-in Vue
, détection intelligente, Emmet, etc.
Extrait de code de l'extrait de VueHelper
Autres plug-ins
1, CSScomb
Règles d'ordre d'écriture CSS, je recommande ici les spécifications de l'équipe Tencent AollyTeam :
http://alloyteam.github.io/CodeGuide/#css-declaration-orderalloyteam.github.io/CodeGuide/#css-declaration-order
Parlons brièvement de la façon d'utiliser ce plug-in :
Créez un fichier nommé csscomb.json dans le répertoire racine du projet, puis ajoutez quelques éléments de configuration. Vous pouvez également écrire des éléments de configuration dans le champ csscombConfig du fichier package.json du projet.
En ce qui concerne les éléments de configuration ajoutés, CSScomb fournit un exemple de fichier de configuration :
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.jsongithub.com/csscomb/csscomb.js/blob/master/config/csscomb.json
L'ordre de tri est l'ordre d'écriture des propriétés CSS, qui peut être défini en fonction des spécifications que vous suivez, je l'ai donc directement remplacé par celui de Tencent.
Les fonctions de chaque champ de ce fichier de configuration peuvent être consultées ici :
csscomb/csscomb.jsgithub.com/csscomb/csscomb.js/blob/master/doc/options.md
2、Journal de la console Turbo
Ajoutez rapidement console.log et commentez/activez/supprimez tous les console.logs en un seul clic. C'est aussi mon plug-in le plus utilisé
Parlons brièvement des touches de raccourci utilisées par ce plug-in :
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
3、GitLens
Journal de validation Git détaillé.
Un incontournable pour les gros utilisateurs de Git, en particulier lorsque plusieurs personnes collaborent : chaque ligne de code, quand et qui l'a soumise sont tous enregistrés.
Maman n'a plus à s'inquiéter que je sois responsable !
4. css-auto-prefix
ajoute automatiquement un préfixe privé CSS.
5. Changer la casse
convertit le style de dénomination.
6. Aperçu CSS
Positionnez le nom de la classe CSS.
7. vscode-json
Traitez les fichiers JSON, voir l'image pour l'utilisation :
8. Regex Previewer
prévisualise l'effet des expressions régulières en temps réel.
Configurer la synchronisation
Il m'a fallu une journée pour enfin configurer vscode comme j'en étais satisfait. Si c'était à refaire à chaque fois que je change d'ordinateur, tout le monde me déchirerait définitivement. Ne vous inquiétez pas, nous l'avons déjà préparé pour tout le monde. Paramètres Sync, synchronisez vos plug-ins entre différents ordinateurs.
Tout d'abord, pour synchroniser votre plug-in entre différents appareils, vous avez besoin d'un jeton et d'un identifiant Gist.
Le jeton est le caractère que vous êtes invité à enregistrer lorsque vous téléchargez le plug-in sur github. L'identifiant Gist est enregistré sur l'ordinateur sur lequel vous avez téléchargé le plug-in.
Permettez-moi d'abord de vous donner trois touches de raccourci, qui seront utilisées plus tard.
1、CTRL+SHIFT+P 我也不知道叫什么，暂且就叫它功能搜索功能吧
2、ALT+SHIFT+D 下载配置
3、ALT+SHIFT+U 上传配置
Je vais maintenant vous apprendre comment le configurer étape par étape :
1. Installez la synchronisation des paramètres
2. Connectez-vous à Github> paramètres> paramètres du développeur> jetons d'accès personnels> générer un nouveau jeton, entrez le nom, vérifiez l'essentiel et soumettez
3. Enregistrez le jeton d'accès Github
4. Ouvrez vscode, Ctrl+Shift+P pour ouvrir la boîte de commande -> entrez sync -> sélectionnez les paramètres avancés -> modifiez les paramètres de l'extension locale -> modifiez le jeton
5. Ctrl+Shift+P pour ouvrir la boîte de commande -> entrez sync -> rechercher les paramètres de mise à jour/téléchargement. Une fois le téléchargement réussi, l'ID Gist sera renvoyé et l'ID Gist sera enregistré.
6. Dans VSCode, ouvrez : Fichier -> Préférences -> Paramètres, puis entrez Sync pour rechercher : vous pouvez trouver votre identifiant général 7. Si vous devez télécharger
le plug-in sur d'autres machines, de la même manière, Ctrl+Shift+P s'ouvre dans la zone de commande, entrez sync, recherchez les paramètres de téléchargement, vous accéderez à l'interface d'édition de jeton de Github, cliquez sur Modifier, régénérez le jeton, enregistrez le jeton nouvellement généré, entrez ce jeton dans la zone de commande vscode, appuyez sur Entrée, puis entrez l'essentiel précédent ID. Vous pouvez synchroniser les plugins et les paramètres
Démarrez un service local.
La première façon
1. Installez le plug-in Debugger pour Chrome
2. Utilisez la touche de raccourci ctrl+` pour ouvrir le terminal, puis entrez npm install -g live-server
3. Entrez live-server dans la ligne de commande.
Deuxième façon
Lors de l'écriture de pages frontales, les pages HTML sont souvent exécutées dans le navigateur. Le protocole de fichier est généralement ouvert directement à partir du dossier local. Lorsqu'il y a un lien http ou https dans le code, la page HTML ne peut pas être ouverte normalement. pour résoudre ce problème Dans ce cas, vous devez démarrer un serveur local localement. Cet article utilise le serveur http dans node.js pour démarrer les services locaux. Les étapes sont les suivantes :
1.Installez le serveur http
Entrez dans le terminal : $ npm install http-server -g
2. Démarrez le service du serveur http
Saisissez le dossier cible dans le terminal et saisissez :
$ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新）
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.8.196:8080
Hit CTRL-C to stop the server
3. Fermez le service du serveur http
Appuyez sur la touche de raccourci CTRL-C. Le terminal affiche ^Chttp-serveur arrêté. Cela signifie que le service a été fermé avec succès.