コードセットアップ

多くのコードエディタがあります、いくつかは無料です、そして、いくらかは支払われます.私の好きなコードエディターの中でもVisual Studio Code . それは無料ですし、驚くべき機能があります.私は私のウェブ開発の旅の初めからそれを使用しています.
今日は自分の好きなコードエディターの設定を共有して、自分のウェブ開発をします.そして、私はコードエディターから始めます.結局問題を見る.

🎨 テーマ:
私の最も使用されるVSコードテーマSnazzy Operator , 現在、私はこれを使用しています.
vs .コードテーマ
このテーマはhyper-snazzy と最適化されたOperator Mono フォント.ジャスト・ラブ😍 このテーマ.
⭐ 私が以前使ったいくつかのテーマ

Oceanic Next - 私は、海洋次の(調光BG)を使いました.

Remedy - 私は暗い治療薬を使った.

✒ フォント
コードエディターのもう一つの重要なことが見えます.私のコードエディタで使用しているフォントはJetBrains Mono . それはLigatureのサポートとフリーフォントです.
Jetbrainsモノラルフォント
フォントリグチャは、=>のような通常の文字の代わりにシンボル装飾をサポートするフォントのための新しいフォーマットです.
オフィシャルサイト
以前JetBrains Mono , 私はオペレーターモノを使いました.また、素敵なフォントです.
⭐ 以前に使ったフォントです.

Operator Mono - 支持力をサポートします.

Fira Code - 無料＆サポートligtures.

Dank Mono - 報酬＆サポートを備えています.

🌟🌟🌟 あなたは私の設定を使用しますか?コードでCtrlキーを押しながらPキーを押します.JSONとそのファイルを開きます.プロパティ値の下で私の指定した値で置き換えます.

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}

📁 アイコン
ファイルアイコンは、我々のVSコードエディタを見ます.主にそれは別のファイルとフォルダを指定したアイコンで区別するのに役立ちます.私のVSコードでは、二つのファイルアイコンを使います

Material Icon Theme - VSのコードの最も人気のあるアイコンのテーマの一つ.

Material Theme Icons - 現在使用中.そして、私は素材のテーマのアイコンを光のバリアントを使用しています.

アイコンのアイコン

🛠 使用する拡張モジュール:

🔹 Auto Rename Tag
自動的にペアのHTML/XMLタグの名前もJSXで動作します.
エントリを追加auto-rename-tag.activationOnLanguage , あなたの設定で.拡張子が起動される言語を設定するJSONファイル.デフォルトで、それは[**]で、すべての言語のために起動されます.

  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

自動リネームタグ(VSコード自動リネームタグ拡張ページから取得)

🔹 Bracket Pair Colorizer 2
この拡張モジュールでは、マッチングブラケットを色で識別できます.ユーザーは、一致するトークンを定義することができますし、使用する色.


🔹 Color Highlight
この拡張モジュールは、ドキュメント内にあるCSS/Webカラーを使用します.
カラーハイライト

🔹 CSS Peek

PEEK :インラインでCSSファイルを読み込み、すぐに編集します.( Ctrl + Shift + F 12 )

移動:CSSファイルに直接ジャンプしたり、新しいエディタで開きます(F 12)

ホバー:シンボルの上にホバーで定義を表示

CSSのPEEK(VS CSSのPEK拡張ページから取得)

🔹 DotENV
強調キー、値のペアを.envファイル.
dotenv ( VS code dotenv extension pageから取得)

🔹 ES7 React/Redux/GraphQL/React-Native snippets
この拡張モジュールでは、VSコードのBabelプラグイン機能を使用して、JavaScriptとReports/Reduxスニペットを提供します.

🔹 ESLint
ツールのための'リンギング'ツール対コードチェックツール.

"Lint, or a Linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs." Wikipedia

🔹 Highlight Matching Tag
ハイライトの開始または終了タグを強調表示します.
タグのマッチングをハイライトする
この拡張モジュールで使用するスタイル

"highlight-matching-tag.styles": {
        "opening": {
            "left": {
                "custom": {
                    "borderWidth": "0 0 0 1.5px",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            },
            "right": {
                "custom": {
                    "borderWidth": "0 1.5px 0 0",
                    "borderStyle": "solid",
                    "borderColor": "yellow",
                    "borderRadius": "5px",
                    "overviewRulerColor": "white"
                }
            }
        }
    }

🔹 Image preview
樋の上で、そして、ホバーでイメージプレビューを示します.
イメージプレビュー(VSコードイメージプレビュー拡張ページからとられます)

🔹 Indent Rainbow
この拡張モジュールは、テキストの前にインデントを色付けします.
インデントレインボー(VSコードインデントレインボー拡張ページから取得)

🔹 Live Server
静的とダイナミックなページのLive Reload機能でローカル開発サーバーを起動します.

🔹 Prettier
きれいなコードフォーマッタです.それはあなたのコードを解析することによって一貫性のあるスタイルを実施し、必要に応じてコードをラップし、アカウントに最大行の長さを取る独自のルールを再印刷します.
プロパティ値の下に設定するtrue または、このプロパティを設定に追加します.JSONファイルを保存する形式のコードをフォーマットします.

  "editor.formatOnSave": true

🔹 Pug beautify
パグ美化プラグイン対コード.F 1キーを押して、あなたのパグファイルを美化するために、Beautify Pug/Jadeというコマンドを実行します.

🔹 REST Client
RESTクライアントを使用すると、HTTP要求を送信し、Visual Studioコードで応答を直接表示できます.
RESTクライアント( VS code rest client extension pageから取得)

🔹 Settings Sync
同期設定、スニペット、テーマ、ファイルのアイコン、起動、keybindings、ワークスペースと拡張複数のマシン間でgithubのgistを使用します.

🔹 TODO Highlight
コード内のToDo、FixMe、およびその他の注釈を強調表示します.

🔹 Version Lens
パッケージ内の各パッケージの最新バージョンを示します.JSONファイル.

📃 端末の設定
Windowsオペレーティングシステムを使用します.コマンドラインを通してgitを使うのでGit Terminal . そして、この端末を端末として使っています.端末の設定は以下の通りです.

  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.fontFamily": "FuraMono Nerd Font",
  "terminal.integrated.fontSize": 12,
  "terminal.integrated.rightClickCopyPaste": true

✔ 便利なVSキーボードショートカット
いくつかの重要なキーボードショートカットがあり、私は日々の生活のコーディングに使用します.これらのショートカットは、Visual Studioのコードで私の生産性を高める.
キーバインド
アクション
CTRL + P
ファイルに移動すると、任意のファイルの任意のファイルに移動することができます
CTRL +
VSコードのオープン端末
アルトダウン
ラインダウン
アルトアップ
ラインアップ
Ctrl + D
次の検索マッチに最後の選択を移動する
Ctrl +スペース
トリガー提案
Ctrl + F
見つける
Ctrl +
行コメントをトグルする
Ctrl + C
コピーライン
Ctrl + X
カットライン
Ctrl + V
ペースト
Ctrl + Z
元に戻す
Ctrl + Y
やり直し
シフト+ alt +ダウン
コピーラインダウン
シフト+ alt +アップ
コピーラインアップ
シフト＋T
最新のクローズドウィンドウを再開する
読書と滞在のおかげでチューニング.🙂👋