この記事では、主に環境変数の設定とタスクと起動ファイルのコンパイルの問題を解決するために、デフォルトで vscode をダウンロードしてインストールしました。
私自身も多くのブログを試しましたが、最終的にはこの方法で正常に設定することができました。
Linux (ubuntu 20.04) で vscode を構成する場合、構成タスクに直接ジャンプしてファイルを起動できます。mingw をダウンロードして環境変数を構成する必要はありません。ターミナルで gcc と g++ をダウンロードするだけです。
Linux システムでターミナルを開きます: 次の 2 つの手順を実行し、構成タスクに直接ジャンプし、ダウンロード後にファイルを起動します。Windows と Linux の起動ファイルの内容は異なります。Linux タスクと起動構成はドキュメントの最後に追加されます。
$sudo apt-get install g++
$sudo apt-get install gcc
ウィンドウズ：
1. MinGW をダウンロードする
MinGW のダウンロード アドレス:
圧縮パッケージ - ×86_64-posix-sjlj をダウンロードします
(次に、解毒剤を指定したフォルダーに移動します。インストールは必要ありませんが、bin フォルダーの環境変数を構成する必要があります)
公式サイトからのダウンロードは遅いので
国内サイトからダウンロードできます
解凍後の画像は以下の通りです。
bin ディレクトリを入力し、bin ファイル ディレクトリをコピーします。たとえば、D:\binbin-download\mingw64\bin となります。
環境変数を設定する: Windows の検索ボックスに環境変数を入力すると、検索結果が表示されます。
ショートカット キー win+R で cmd を開き、gcc -v または g++ -v を実行します。
このプロンプト ボックスが表示され、最終的に gcc のバージョンが表示されたら、環境変数が正常に設定されたことがわかります。
vscode を開き、[拡張機能] をクリックし、上部で「c/c++、chinese、コード ランナー」を検索し、c/c++ および中国語のプラグインをダウンロードします。(写真1枚目は大丈夫です)
重要な手順はここです。まず、C/C++ コードを保存するために Code という名前のフォルダーを作成し、次に Code フォルダーに .vscode を作成し、Code ルート ディレクトリに C/C++ テスト ファイル test を作成します。cpp,
図に示すように (.vscode 内のファイルの背後にある構成)
#include <stdio.h>
#include<iostream>
using namespace std;
int main()
{
printf("Hello World\n");
return 0;
}
デバッグ インターフェイスに入り、構成環境を追加し、C++ (GDB/LLDB) を選択し、g++.exe を選択します。launch.json 構成ファイルが自動的に生成されます。mingw のパスが含まれる場合は、パス名に変更します。ファイルを自分で作成してください。
vscode の .vscode ディレクトリに 3 つの json ファイルを設定します。vscode
を開いて Ctrl+Shift+p を押します。赤いボックスをクリックして .vscode フォルダーを生成します。
または、ここで 2 つのフォルダーを直接作成します
次に、task_json、launch_jsonを構成します。
タスク_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"
}
起動.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
}
設定.json
{
"C_Cpp.errorSquiggles": "disabled",
"files.associations": {
"iostream": "cpp",
"ostream": "cpp"
}
}
VScodeのユーザー設定
- 設定を開く
ファイル – 環境設定 – 設定、ユーザー設定を開きます。VScode は、構成の選択と、setting.json ファイルの編集によるデフォルト構成の変更をサポートしています。個人的には json を書いて設定するのが好みなので、個人的な設定コードを以下に添付します。
一般的な構成項目をいくつか示します。
(1) editor.fontsize はフォントサイズの設定に使用されます。
(2) files.autoSave 属性は、ファイルが自動的に保存されるかどうかを示します。onFocusChange - ファイルのフォーカスが変更されたときに自動的に保存するように設定することをお勧めします。
(3) editor.tabCompletion は、推奨値が表示されたときに Tab キーを押すと、最適な推奨値を自動的に入力するために使用されます。
(4) editor.codeActionsOnSave の source.organizeImports 属性。この属性は、保存時にインポート ステートメントの順序を自動的に調整し、インポート ステートメントをアルファベット順に配置できるようにします。これを true に設定することをお勧めします。 editor.codeActionsOnSave" : { "source.organizeImports": true };
(5) editor.lineNumbers はコード行番号を設定します。つまり、editor.lineNumbers: true;
参考のための私の個人的な構成:
{
"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
}
}
}
最近、WeChat で「この設定コードはどこに書かれているのですか?」とよく質問されます。
新しいバージョンの vscode 設定は、デフォルトで以前の json 設定ではなく UI 設定になります。上記のコードをコピーして構成したい場合は、次の変更を加えることができます。
[ファイル] > [設定] > [設定] > [workbench.settings.editor] を検索し、json を選択して json 設定に変更します。
自動更新を無効にする
[ファイル] > [環境設定] > [設定] (macOS: [コード] > [環境設定] > [設定] で、更新モードを検索し、設定を [なし] に変更します。
コードヒント設定をオンにする
ステップ 1: 左下隅にある設定アイコンをクリックし、「設定」を見つけてクリックします
ステップ 2: 検索ボックスで「防止」を検索 -> この項目のチェックを外します
よく使用されるショートカット キー
vscode を効率的に使用するには、よく使用されるショートカット キーをいくつか覚えておくことが重要です。
以下は主に Windows に基づいていますが、Windows の Ctrl は Mac の Command に置き換えることができます。
行操作の場合:
行を再度開きます: カーソルが行末にある場合は Enter キーを押します。カーソルが行末にない場合は、Ctrl + Enter で下方向の行を再度開きます。Ctrl + SHIFT + Enter で行を再度開きます。前の行と行の削除: カーソルでコンテンツが選択されていない場合
、CTRL
+
_ 行を上にコピー
CTRL + Z に戻って
単語を操作します。
- 単語を選択します: Ctrl + Dを押し
て検索または置換します:
Ctrl + F: 検索
Ctrl + Alt + F: 置換
Ctrl + SHIFT + F: プロジェクト内を検索
Ctrl + ` ターミナルを開いたり閉じたりできます
Ctrl+P を押すと、最近開いたファイルがすぐに開きます
Ctrl+Shift+N 新しいエディタ ウィンドウを開く
Ctrl+Shift+W エディタを閉じる
ホーム カーソルが行頭にジャンプします
End カーソルが行末にジャンプします
Ctrl + Home ページの先頭にジャンプします
Ctrl + End ページの最後にジャンプします
Ctrl + Shift + [地域コードを折りたたむ
Ctrl + Shift + ] 地域コードを展開
Ctrl + / 終了行コメントを追加
Shift + Alt +A ブロック領域の注釈
プラグインのインストール
入力ボックスにインストールするプラグインの名前を入力し、「インストール」をクリックします。インストール後は効果がありません。vscode を再起動できます。
必須のプラグイン:
1. ブラウザで表示
ブラウザで Web ページをプレビューする場合に不可欠です。HTML ファイル
2、vscode-iconsを実行して
、エディターのファイル アイコンを変更します。
3. ブラケット ペア カラーライザーは、
ネストされたさまざまなブラケットに異なる色を追加します。
4. Auto Rename Tag は、
一致する HTML タグを自動的に変更します。
5. パス Intellisense
インテリジェント パス プロンプト。ファイル パスを入力するときにインテリジェントにプロンプトを表示します。
6. Markdown Preview は、
マークダウンをリアルタイムでプレビューします。
7. stylelint
CSS / SCSS / 文法チェックの軽減
8. インポート コスト
では、パッケージ サイズの計算が導入されており、パッケージ化後のプロジェクトのボリュームを制御するのに非常に役立ちます。
9. Prettier
は、Beautify よりも便利なコード フォーマット プラグインです。
Vue プラグイン
vetur
構文ハイライト、インテリジェント センシング、Emmet など。
VueHelper
スニペットのコード スニペット
その他のプラグイン
1、CSScomb
CSS の書き順ルール。ここでは Tencent AollyTeam チームの仕様をお勧めします。
http://alloyteam.github.io/CodeGuide/#css-declaration-order alloyteam.github.io/CodeGuide/#css-declaration-order
このプラグインの使用方法について簡単に説明します。
プロジェクトのルート ディレクトリに csscomb.json という名前のファイルを作成し、いくつかの構成項目を追加します。プロジェクトの package.json ファイルの csscombConfig フィールドに構成項目を書き込むこともできます。
追加された設定項目に関しては、CSScomb がサンプル設定ファイルを提供しています。
https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
sort-order は CSS プロパティの書き込み順序であり、準拠する仕様に従って設定できるため、Tencent のものに直接置き換えました。
この設定ファイルの各フィールドの機能は、次の場所で確認できます。
csscomb/csscomb.js github.com/csscomb/csscomb.js/blob/master/doc/options.md
2、ターボコンソールログ
console.log をすばやく追加し、ワンクリックですべての console.log にコメント/有効化/削除を加えます。これは私が最もよく使用するプラグインでもあります
このプラグインで使用されるショートカット キーについて簡単に説明します。
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
3、GitLens
詳細な Git コミット ログ。
Git のヘビー ユーザー、特に複数人で共同作業する場合には必須です。コードのすべての行、いつ、誰が送信したかがすべて記録されます。
お母さんはもう私が責任を取ることを心配する必要はありません。
4. css-auto-prefix は
CSS プライベート プレフィックスを自動的に追加します。
5. 大文字と小文字を変更すると
、命名スタイルが変換されます。
6. CSS ピーク
CSSクラス名を配置します。
7.vscode-json
JSON ファイルを処理します。使用法については図を参照してください。
8. Regex Previewer は、
正規表現の効果をリアルタイムでプレビューします。
同期の設定
vscode を満足のいく設定にするまでに 1 日かかりましたが、コンピューターを変えるたびに同じ設定を最初からやり直さなければならなかったとしたら、間違いなくみんなに引き裂かれるでしょう。心配しないでください。すでに全員のために用意されています。設定の同期、異なるコンピューター間でプラグインを同期します。
まず、異なるデバイス間でプラグインを同期するには、トークンと Gist ID が必要です
トークンは、プラグインを github にアップロードするときに保存するように求められる文字です。Gist ID は、プラグインをアップロードしたコンピューターに保存されます。
最初に 3 つのショートカット キーを紹介します。これらは後で使用します。
1、CTRL+SHIFT+P 我也不知道叫什么，暂且就叫它功能搜索功能吧
2、ALT+SHIFT+D 下载配置
3、ALT+SHIFT+U 上传配置
次に、それを構成する方法を段階的に説明します。
1.Settings Sync をインストールします。
2. Github にログイン > 設定 > 開発者設定 > 個人アクセス トークン > 新しいトークンを生成し、名前を入力し、Gist を確認して送信します。
3. Github アクセス トークンを保存します。
4. vscode を開き、Ctrl+Shift+P を押してコマンド ボックスを開きます –> sync と入力 –> 詳細設定を選択 –> ローカル拡張機能の設定を編集 –> トークンを編集
5. Ctrl+Shift+P を押してコマンド ボックスを開きます –> 「sync」と入力 –> 更新/アップロード設定を見つけます。アップロードが成功すると、Gist ID が返され、Gist ID が保存されます。
6. VSCode で、[ファイル] -> [設定] -> [設定] を開き、「同期」と入力して検索します。Gist ID を見つけることができます。 7. 他のマシンにプラグインをダウンロードする必要がある場合は、同様にCtrl+Shift+P を押します。コマンド ボックスに「sync」と入力し、「ダウンロード設定」を見つけます。Github のトークン編集インターフェイスにジャンプします。「編集」をクリックしてトークンを再生成し、新しく生成されたトークンを保存します。vscode コマンド ボックスにこのトークンを入力し、Enter キーを押して、前の要点を入力します。 ID. プラグインと設定を同期できます
ローカル サービスを開始します。
最初の方法
1. Debugger for Chrome プラグインをインストールします
2. Ctrl+` ショートカット キーを使用してターミナルを開き、「npm install -g live-server」と入力します。
3. コマンドラインに「live-server」と入力します。
第二の方法
フロントエンド ページを作成する場合、HTML ページはブラウザで実行されることがよくあります。通常、ファイル プロトコルはローカル フォルダーから直接開かれます。コード内に http または https リンクがある場合、HTML ページを正常に開くことができません。この問題を解決するには、ローカル サーバーをローカルで起動する必要があります。この記事では、node.js の http-server を使用してローカル サービスを開始します。手順は次のとおりです。
1.httpサーバーをインストールする
ターミナルに次のように入力します: $ npm install http-server -g
2. httpサーバーサービスを開始します。
ターミナルでターゲットフォルダーを入力し、次のように入力します。
$ 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. http-server サービスを終了します。
ショートカット キー CTRL-C を押すと、ターミナルに「^Chttp-server stop」と表示されます。これは、サービスが正常に終了したことを意味します。