インフラエンジニアのPC環境

インフラエンジニアは常に効率環境を目指している

ユーザ用ツール

サイト用ツール


サイドバー

目次

ホーム

OS


CUIソフト

今はほぼ未使用

操作を覚える必要のあるおすすめソフト

software:editor:vscode:index.html


テキストエディタの比較・おすすめ

VSCode (Visual Studio Code)の設定と操作メモ

特徴

  • Windows, Mac, Linux
  • Atomより爆速
  • 色々な機能が標準で対応している。
    • マークダウンのプレビューが標準
    • Gitが標準
  • 標準で色々な言語をサポート(Markdown, Batch, Dockerfile, Ini, SQLなども)


操作

起動 code
code .
code FILE
code -d FILE1 FILE2
コマンドパレットを開く Windows : ctr + shift + p
Mac Command + Shift + P
F1
ファイル内検索
(開いているファイルのみ対象)
windows:[Ctrl] + 【F】
mac:[Cmd] + 【F】
ファイル内検索
(フォルダを対象)
windows:【Ctrl】+【Shift】+【F】
mac:【Cmd】+【Shift】+【F】
左の虫眼鏡アイコンでも可能
虫眼鏡アイコンは使いやすい
ファイル名検索 windows:[Ctrl] + 【P】
mac:[Cmd] + 【P】
ファイル検索するための、ボックスが表示されます。
[Go] > [Go to File…]
複数行コメント Windows:「Ctrl」 + 「/」
Mac:「Command」 + 「/」
タブの移動 windows:【Ctrl】 + 【PageUp/Down】
mac:【Command】 + 【Option】 + 【矢印】

矩形選択

OS マウス操作 キーボード操作
Windows 始点をクリックしてから、
終点を[Shift]+[Alt]+左クリック
[Ctrl]+[Shift]+[Alt]+矢印キー
Linux 既定では設定なし
Mac 始点をクリックしてから、
終点を[Shift]+[Option]+左クリック
[Shift]+[Option]+[Command]+矢印キー

差分(diff)を表示

方法1

  1. 比較する2ファイルを開く
  2. 1つ目のファイルを開く
  3. コマンドパレットで、「compare with」と入力し、[ファイル: アクティブ ファイルを比較しています]を選択する
  4. 2つ目のファイルを選択する。

方法2(エクスプローラービューを利用する方法)

  1. [エクスプローラー]ビューで、
  2. 比較元のファイルを右クリックして、コンテキストメニューから[比較対象の選択]をクリックする。
  3. 比較したいファイルを「右クリック」して、コンテキストメニューから[選択項目と比較]を選ぶ
  4. 差分を表示するエディタが開かれる。


設定

ファイル > 基本設定 > 設定

ツリーが見にくいので、インデントを変更

日本語表示の場合:基本設定 > 設定
英語表示の場合:Preference > Settings

「tree」と入力する

workbench.tree.indent を 8 から 20に変更する

全角の周りに付く黄色枠を解除

(1)Editor > Unicode Highlight: Include Comments
「false」にする

(2)Editor>Unicode Highlight: Non Basic ASCII
「false」にする

タブを多段表示

ファイル → ユーザー設定 → 設定
Ctrl + ,

wrap tabs で検索し、チェックを入れる

タブ・スペースを表示

日本語表示の場合:基本設定 > 設定 > テキストエディター > Render Whitespace
英語表示の場合:Preference > Settings > Text Editor > Render Whitespace

設定項目を「all」にします。

文字コードを自動判別

有効な場合、ファイルを開くときに文字セット エンコードを推測します

英語表示の場合:Preference > Settings > Text Editor > Files

Auto Guess EncodingをOn

Proxy

英語表示の場合:Preference > Settings > Application > Proxy

ミニマップ非表示

英語表示の場合:Preference > Settings > Text Editor > Minimap

「Controls whether the minimap is show」をOffにする。

予測変換(Suggestion機能)をOFF

(個人的には、Suggestionを表示させるけど、Enterでは決定させないのがいいかなと思います)

Enterを押しても、予測変換を入力させない方法

「code」→「基本設定」→「設定」
「accept」と入力する
「Editor: Accept Suggestion On Enter」をOff

予測変換(Suggestion機能)を表示させない

「code」→「基本設定」→「設定」
「suggestion」と入力する
「Editor:Quick Suggestions」のotherのValueをonにする


Macでの設定

Macで、ターミナルから起動する方法

Command + Shift + P で、コマンドパレットを開いて、
「Shell」を検索して、インストールする。

codeで、Visual Studio Codeが開くようになる。

codeはただのシェルスクリプトです。



上の方法は、管理者権限が必要なので、他の方法のメモ

alias code='open -a "Visual Studio Code"'

これだけで、code .で起動できるようになる。



メモ:macos - Run / Open VSCode from Mac Terminal - Stack Overflow

code () {
    if [[ $# = 0 ]]
    then
        open -a "Visual Studio Code"
    else
        [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}"
        open -a "Visual Studio Code" --args "$F"
    fi
}


ワークスペース

Visual Studio Codeでフォルダーを開くと1つだけしか開けなく、
複数開いておきたい場合、ウィンドウを複数起動する必要があありますが、
ワークスペースを使うと、フォルダーを複数開け、その状態を保存できます。

検索や置換もワークスペース全体が範囲になります。

複数のプロジェクトのソースコードをみたい時に、ワークスペースを使うと便利です。

保存すると、「XXXX.code-workspace」という拡張子になり、それを開くと元の状態に戻ります。

ワークスペースの操作

ワークスペースを開く コマンドパレットを開き、 Duplicate Workspace in New Window
ワークスペースにフォルダーを追加 ワークスペースを右クリックして、「Add Folder to Workspace」
またはメニューバーのファイルタブから。
ワークスペースを保存 メニューバーのファイルタブから、「名前をつけてワークスペースを保存」

おすすめのGitの設定

ワークスペースを使うと、.code-workspaceのファイルが量産されます。
Gitでリポジトリを管理している場合、このファイルの差分が発生するため、コミットしないようGitの設定を修正するのがおすすめです。

# .gitignore
*.code-workspace

.gitignore はプロジェクト固有のファイルを無視するための設定ファイルのため、個人の設定を反映すべきではない場合が存在します。
そんなときは、.git/info/excludeファイルに設定を追記しましょう。

# ./git/info/exclude
*.code-workspace


拡張機能

拡張機能 説明
【おすすめ】
Project Manager
ワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能
【不要】
VSNotes
VS Code用のメモ機能
ctr + shift + pかF1で、パレット表示
VSNotes Run setupを実行する
VSNotes:Create a New Noteで、ノート作成\
vscode-icons VScodeのエクスプローラで、アイコンを追加して見やすくします。
Rainbow CSV CSVファイルをカラー表示
Programing
Todo Tree TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる
HashiCorp Terraform
indent-rainbow インデントスペースを視覚化
Trailing Whitespace Highlighter 行末の半角スペースを分かりやすく
prettier code formatter コードを自動整形
zenkaku 全角スペースを見やすくしてくれ、全角空白によるエラーを防ぐ
Regex Previewer 正規表現のチェック
Path Autocomplete パスの補完補助をしてくれる
Git
【おすすめ】
Git History
Gitのコミット履歴を見やすく表示することができます.
コマンドパレットをCtrl + Shift + Pで表示して,Git: View History (git log)を実行します.
Git Graph コミット履歴をツリー形式で表示してくれる
git graphはシンプルで使い勝手良さそう。
UIがgit historyに比べて見やすい。
下記の設定を行うとDiff表示をとなりのグループで開いてくれるます。
“git-graph.openNewTabEditorGroup”: “Beside”
Git Lens 高機能な拡張で、様々なGit操作を行うことができます.
Remote
Remote – SSH VScodeからSSHする
Remote – SSH:Editing Configuration Files VScodeからSSHした後に、リモートのファイルを確認する
Remote-WSL VSCodeがWSLにリモート接続するために必要な拡張機能
Remote-Containers VSCodeがコンテナにリモート接続するために必要な拡張機能
Remote Development Remote-WSLとRemote-Containersに加え、Remote-SSHがセット
Syntax
vscode-cisco-syntax CiscoのConfigをカラー表示にしてくれます
Junos Extension for Visual Studio Code
DokuWiki Syntax highlighting for DokuWiki markup


software/editor/vscode/index.html.txt · 最終更新: 2024/04/07 01:16 by kurihara

ページ用ツール