デザイナーとフロントエンドの開発者向けのセットアップ対コード

VSコードは、市場で利用可能なすべての中で最も人気のある、無料、お気に入りのコードエディタの一つです.
VSコードは機能とカスタマイズオプションの広大なセットと拡張子のトンを持っています.
私はあなたのコードエディターの設定と作業の設定を紹介します.
この記事では、フロントエンドの開発者やデザイナーのVSコードをカスタマイズする方法をご紹介します.Steps:

インストール

設定色のテーマ、フォントやファイルのアイコンのテーマ

ツールと言語

プラグインのインストール

キーバインドとショートカット

インストール
公式サイトからダウンロードしてインストールするhttps://code.visualstudio.com/Download
デフォルトのコードは、シンプルできちんとした、きれいに見えます.

VSコードでプロジェクトを開く方法.

端末/cmdをオープンする

プロジェクトディレクトリに移動する

実行コマンドcode .

次に、色のテーマ、フォント、およびテーマのアイコンを設定します.

🎨 カラーテーマ
私のすべての時間の好きな色のテーマの1つですAtom's One Dark Pro .
インストール

Ctrl + Pキーを押してコマンドを入力します.ext install zhuangtongfa.Material-theme

またはCtrl + Shift + Xを押すと、カラーテーマを検索する

コードVSダークプロテーマスクリーンショット

ルックスすごいですね.
私が好きだった他の色のテーマ.

Material Theme パーライト

Dracula Official ドラキュラ

マテリアル・テーマ

ドラキュラテーマ

🚀 フォント
テーマの後で最も重要なことはフォントです.フォントの適切な選択は、よりまともな、エレガント＆モダンなルックアンドフィールを与える.
開発目的のために、プログラミングされたモノリアントフォント(Ligatureをサポートする)を使用してください.
現在、私はリガコードもサポートするFIRAコードを使用しています.
FIRAコードインストール

フォントをダウンロードしますhttps://fonts.google.com/specimen/Fira+Code 抽出してインストールします.

今、FIRAコードをVSコードフォントとして設定します.

設定を開きます(Ctrl +)、検索セクションでエディター:フォントファミリーに入り、家族リスト内の「fira code」として最初の値を追加します.

また、設定でフォントファミリを設定することができます.JSON

"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",

次に、Ligatureを有効にします.ligatures supports will convert the fonts into symbolsデフォルトフォント

デフォルトシンボル
フォントの結

連結文字
Ligatureを有効にするには、設定から設定を有効にする必要があります.JSONファイル.
設定を開きます.JSONとファイルを開きます.
次に、この行を追加する

"editor.fontLigatures": true,

これが私の設定です.JSONファイル

{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}

あなたがLigatureをサポートするのを使うことができる他のmonospaceプログラミングフォントはそうです...

Cascadia Code

Hasklig

JetBrains Mono

Victor Mono

Iosevka

🎠 ファイルアイコン
ファイルアイコンは大きいです.ファイルとフォルダとファイルの種類を識別＆識別するファイルのアイコンを使用します.
現在、私はMaterial Theme Icons
ファイルアイコンをインストールするには

Ctrl + Pキーとコマンドを押します.ext install Equinusocio.vsc-material-theme-icons

また、ファイルのアイコンテーマを拡張して検索してインストールできます.

他のファイルアイコンのテーマは.

vscode-icons

Material Icon Theme

VSCode Great Icons

ツールと言語
VSCodeはツール、コンパイラ、強調表示、フォーマッタなどの種類があります.
我々は、開発速度とパフォーマンスを高めるためにそれらのいくつかをインストールします.

SASS ( CTL + P & typeコマンドext install Syler.sass-indented )
SASS構文強調表示、autocomplete＆formatterに便利です.

Live Sass Compiler
LiveブラウザのリロードとリアルタイムでCSSにSASSまたはSCSSをコンパイルします.

language-stylus
スタイラス、カラープレビューのための言語強調表示
構文強調表示
シンボルプロバイダー
セレクタ、プロパティ、値、変数、関数などの補完.

ES7 React/Redux/GraphQL/React-Native snippets
ES 7構文とJS/反応スニペット

VUE
Vue JSの構文強調表示

Vutur
VSコードのVueツーリング

プラグインのインストール
最も便利で人気のあるプラグインをアルファベット順にインストールします.

Auto Rename Tag ( 3 M +ダウンロード*)*
自動リペアペアのHTML/XMLタグCommnd: ext install formulahendry.auto-rename-tag

Auto Close Tag ( 3 M +ダウンロード*)*
自動的にHTML/XMLの終了タグを追加するcommand: ext install formulahendry.auto-close-tag

AutoFileName
自動補完ファイル名command: ext install JerryHong.autofilename

Beautify ( 5 M +ダウンロード*)*
美化するjavascript , JSON , CSS , Sass , and HTML Visual Studioコードで.command: ext install HookyQR.beautify

Bracket Pair Colorizer ( 3.4 M +ダウンロード*)*
対応するブラケットを彩色します.command: ext install CoenraadS.bracket-pair-colorizer

ブラケットペア

Bookmarks (1 M +ダウンロード*)**
この拡張モジュールは、ファイルのポイントをマークし、それらにジャンプするために使用されます.command: ext install alefragnani.Bookmarks

Color Highlight ( 1.1 M +ダウンロード*)*
vscodeのハイライト色command: ext install naumovs.color-highlight

Color Info ( 320 k +ダウンロード*)*
CSSの色に関する情報を提供しますcommand: ext install bierner.color-info

CSS Peek (1 M +ダウンロード*)**
HTMLファイルから各CSSへの定義としてCSS IDとクラス文字列をのぞくことができます.Peekとgotoの定義を許可します.
クラス名をオーバーしてCSSプロパティを表示します.command: ext install pranaygp.vscode-css-peek

DotENV ( 1.1 M +ダウンロード*)*
の構文.envファイルcommand: ext install mikestead.dotenv

ESLint (10 M +ダウンロード*)*
EvlintのJavaScriptをVSコードに統合します.command: ext install dbaeumer.vscode-eslint

HTML CSS Support

CSSサポートcommand: ext install ecmel.vscode-html-css

htmltagwrap
HTMLタグで選択したコードをラップするcommand: ext install bradgashler.htmltagwrap

HTML snippets
タグスニペットcommand: ext install abusaidm.html-snippets

Highlight Matching Tag
強調表示の開始と終了ブラケット.command: ext install vincaslt.highlight-matching-tag

IntelliSense for CSS class names in HTML
自動補完command: ext install Zignd.html-css-class-completion

Import Cost
ディスプレイ自体のインポート/ファイルサイズを表示します.command: ext install wix.vscode-import-cost

indent-rainbow
字下げを着色するcommand: ext install oderwat.indent-rainbow

Image Preview
上のCSSファイルで画像をプレビュー表示command: ext install kisstkondoros.vscode-gutter-preview

JavaScript (ES6) code snippets ( 3.8 m +ダウンロード)
ES 6のためのコード断片command: ext install xabikos.JavaScriptSnippets

Live Server
ブラウザでローカルのdevのサーバーファイルを起動してcommand: ext install ritwickdey.LiveServer

Prettier - Code formatter ( 7.7 M +ダウンロード*)*
コードフォーマッタcommand: ext install esbenp.prettier-vscode

Peacock
カスタマイズワークスペースカラーcommand: ext install johnpapa.vscode-peacock

Path Intellisense ( 3.3 m +ダウンロード*)
ファイル名自動補完command: ext install christian-kohler.path-intellisense

Settings Sync
同期設定、プラグイン、キーバインド、テーマ、アイコンなど.command: ext install Shan.code-settings-sync

Turbo Console Log
簡単かつ迅速に意味のあるログメッセージを書き込みます.command: ext install ChakrounAnas.turbo-console-log

TabNine
オートコンパイラcommand: ext install TabNine.tabnine-vscode

設定テキストファイルを設定することもできます.

🌈 Myyの設定

設定.JSON

{
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "eq-material-theme-icons",
    "workbench.editor.highlightModifiedTabs": true,
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "workbench.tree.indent": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "editor.lineHeight": 26,
    "explorer.confirmDragAndDrop": false,
    "editor.fontSize": 15,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.cursorBlinking": "smooth",
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "sync.gist": "",
    "sync.autoUpload": true,
    "sync.autoDownload": true,
    "sync.removeExtensions": false,
}

************************************************************************************************
キーバインド/ショートカット
機能／動作
アルト＋Z
トグルワードラップ
Ctrl + D
単語と一致する単語を選択
Ctrl +
オープン設定
CTRL +
オープンターミナル
CTRL + P
コマンドエクスプローラーの実行
シフト＋P
コマンドパレット
左シフト/右矢印
単語を選択
Alt +矢印(上下)
線を上下に動かす
Alt + Shiftキー(上下)矢印
複数の編集用の行をコピーします.
Ctrl +
コメントをコメントする
Ctrl + N
新しいタブ
Ctrl + F
見つける
シフト＋T
前のタブを再開する
Ctrlキーでタブを押す
タブを切り替える
のキーボードショートカットhttps://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
のキーボードショートカットhttps://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
MacOSのキーボードショートカットhttps://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
デザインドラスティックポストhttps://designdrastic.com/article/setup-vs-code-for-designer-and-front-end-developers
読書ありがとう.私は、これはあなたのパフォーマンス、速度、およびエディタの生産性を向上させることを願っています.