ニューデイ(株)のロゴ

 IT備忘録 「エディター」

トップにスクロールする

Visual Studio Codeのインストールの方法

   Windows10 x64の場合  最終更新日2018_08_21 

    下記操作により不具合が起きても責任を負いかねますのでご了承下さいませ。

1、右記をクリック https://code.visualstudio.com/

VSCodeサイト

2、プルダウン記号をクリックし「Windows x64 Installer」「Stable」をクリックする。

Stable:安定した。

3、ダウンロードした、VSCodeUserSetup-x64-1.26.1.exeをダブルクリックする。

次へ → 「同意する」ををクリックして 次へ → 次へ → 


VSCodeサイト

次へ → 


VSCodeサイト

レ点を入れて、次へ → 「インストール」をクリック。 → 完了

4、Visual Studio Codeを起動したら、表示言語を日本語に変更します。

VSCodeサイト

「インストールして再起動(Install and Restart)」をクリック。

5、初期設定を行います。

「ファイル(F)」→「基本設定(P)」→「設定(S)」


右側を追加、変更します。

VSCodeサイト

下記を上記に上書きする。


		"breadcrumbs.enabled":true,
		"editor.fontSize": 19,
		"editor.minimap.enabled": false,
		"editor.renderWhitespace": "all",
		"editor.renderControlCharacters": true,
		"extensions.ignoreRecommendations": true,
		"workbench.colorTheme": "Monokai",
		"workbench.iconTheme": "vs-seti",
		"workbench.editor.enablePreview": false,
		"workbench.activityBar.visible": true,
		"workbench.statusBar.visible": true,
		"workbench.sideBar.location": "left",
		"workbench.tips.enabled": false,
		"workbench.editor.showTabs": true,
		"workbench.settings.enableNaturalLanguageSearch": false,
		"files.encoding": "utf8",
		"files.eol": "\n",
		"editor.fontFamily": "Consolas, monospace",
		"editor.tabSize": 2,
		"editor.insertSpaces": false,
		"editor.detectIndentation": true,
		"editor.wordWrap": "on",
		"editor.autoClosingBrackets": false,
		"editor.folding": false,
		"editor.cursorBlinking": "smooth",
		"editor.renderLineHighlight": "gutter",
		"editor.scrollBeyondLastLine": false,
		"editor.wordSeparators": "`~!#%^&*()-=+[{]}\\|;:'\",.<>/?", 
		"editor.mouseWheelScrollSensitivity": 3,
		"editor.glyphMargin": false,
		"editor.multiCursorModifier": "ctrlCmd",
		"editor.mouseWheelZoom": false,
		"editor.links": false,
		"files.autoSave": "off",
		"html.format.wrapLineLength": 0,
		"window.zoomLevel": 0,
		"window.restoreWindows": "one",
		"workbench.startupEditor": "newUntitledFile",
		"gulp.autoDetect": "off",
		"jake.autoDetect": "on",
		"emmet.triggerExpansionOnTab": true,
		"emmet.showExpandedAbbreviation": "always",
		"emmet.showAbbreviationSuggestions": true,
		"emmet.excludeLanguages": [
				"markdown",
				"json"
		],
	
					

6、「ファイル」→「保存」

保存しないと変更が保存されないので注意。

7、日本語で開発するうえで困るのが全角空白の非表示です。

それを表示するようにします。

VSCodeサイト

1(拡張機能)をクリックする → 2 zenkakuと入力する。

3 のzennkaku をインストールする。


「再読み込み」が表示されたら再読み込みを行う。


任意のコードでテストしてみる。全角空白が表示されるようになった。

VSCodeサイト

以下 インストールすつと良い拡張機能

 検索 → 「インストール」を押下する。

 ①、Bracket Pair Colorizer

  括弧をペアごとに違う色を付けて見やすくしてくれる。
入れ子状態が見やすい。

VSCodeサイト

 ②、Color Highlight

  カラーコードの色を可視化してくれる。

VSCodeサイト

 ③、Trailing Spaces

  行末のスペースを可視化してくれる。
プログラム言語によっては予想外の動き、表示をする場合がある為。

VSCodeサイト

 ④、indent-rainbow

  インデントごとに背景色を変えて見やすくしてくれる。

VSCodeサイト

 ⑤、Clipboard Ring

  [Ctrl]+[Shift]+[V]を押すと、最後にコピーしたものが表示される。
ここで[Ctrl]キーと[Shift]キーを押下した状態で、
さらに[V]を押すと以前にクリップボードに格納された内容が順に表示される。



開発言語のための拡張機能

    とにかく下記をインストールしておく。

 ①、JavaScriptの場合

  • JavaScript (ES6) code

  • ESLint
    コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。

  • TSLint
    TypeScriptを使った場合、コードを実行する前に明らかなバグを見つけてくれる。

  • Vetur

 ②、Javaの場合

  • Java Extension Pack

 ③、Pythonの場合

  • Python

 ④、PHPの場合

  • PHP IntelliSense

  • PHP DocBlocker

 ⑤、Rubyの場合

  • Ruby

  • erb

 ⑥、jQueryの場合

  • jQuery Code Snippets