生産性を向上させるためにVSCodeを設定する方法

コードエディタは何年にもわたって進化してきました。数年前、Visual Studio Code(VS Code)はありませんでした。おそらくSublimeText、Atom、Bracketなどを使用していました。しかし、VS Codeのリリースにより、ほとんどの開発者のお気に入りのコードエディターになりました。

なぜVSCodeなのか?

開発者はそれを愛しています

  • カスタマイズ可能です
  • 簡単なデバッグ
  • エメット
  • 拡張機能
  • Git統合
  • 統合端末
  • インテリセンス
  • テーマなど…

VS Codeを使用する利点を確認したので、この記事では、生産性を最大化するためにVSCodeを使用するときに必要なVSCodeのセットアップと拡張機能について説明します。

ターミナル

iTerm2とZShを使用するようにターミナルをセットアップし、それを使用するようにVSCodeターミナルをセットアップすることができます。

Zshを構成した後、Terminal > New TermiVSCode統合ターミナルnalandを起動してコマンドを実行します

source ~/.zshrc

または

. ~/.zshrc

シェルで.zshrc構成ファイルの内容を実行します。

フォント

FiraCodeは、合字がサポートされているため、かっこよく見えます。FiraCodeをダウンロードしてインストールし、settings.jsonファイルに追加します。

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

コマンドラインからの起動

ターミナルからVSCodeを起動するのはかっこいいですね。これを行うには、CMD + SHIFT + Pを押し、shell command入力して、パスにInstall codecommandを選択します。その後、ターミナルから任意のプロジェクトに移動しcode .、ディレクトリから入力して、VSCodeを使用してプロジェクトを起動します。

構成

ワークスペースに固有ではないVSCode構成は、settings.json内に格納されています。好みに合わせてVSCodeを構成できます。

settings.jsonを起動するには、を押します

CMD + ,

以下のコードをコピーして、settings.jsonファイル内に貼り付けます。

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "editor.wordWrap": "bounded", "editor.trimAutoWhitespace": true, "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.formatOnSave": true, "files.autoSave": "onFocusChange", "emmet.syntaxProfiles": { "javascript": "jsx" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact" ], "javascript.validate.enable": true, "git.enableSmartCommit": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 2, "gitlens.historyExplorer.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "workbench.sideBar.location": "right", "explorer.confirmDelete": false, "javascript.updateImportsOnFileMove.enabled": "always",}

拡張機能

以下は、コードベースで作業する際の開発者エクスペリエンスを向上させることができる便利な拡張機能です。

これらの拡張機能にアクセスするには、

  • View -> Extensiオンに移動
  • マーケットプレイスで拡張機能を検索する
  • [インストール]をクリックします

1.自動インポート

この拡張機能を使用すると、ファイルを手動でインポートする必要がありません。コンポーネントベースのプロジェクトで作業している場合は、先に進んでコンポーネント名を入力するだけで、自動的にインポートされます。

2.jsdocコメントを追加します

これにより、コメントブロックがコードに追加されます。これを使用するには、関数の最初の行を強調表示し、を押しCMD + SHIFT + Pて[ドキュメントコメントの追加]を選択します

3. ESDoc MDN

特定のシナリオでは、特定のものがどのように機能するかを忘れがちです。ここで、この拡張機能が役立ちます。構文を見つけるためにWebブラウザを起動する必要はありません。入力するだけです

//mdn [object].[method];

4.CSSピーク

As the name implies, this helps you peek on rules applied by a defined style within a codebase and its specificity. It comes in handy when working on legacy codebases.

5. GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more, such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

6. ESLint

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.

To install ESLint locally, run

npm install eslint

or globally using

npm install -g eslint

You would also need to create .eslintrc configuration file. If you installed ESLint locally, run

./node_modules/.bin/eslint --init

or

eslint --init

for global installation.

7. Debugger for Chrome

This lets you debug your JavaScript code right from the Google Chrome browser

8. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

9. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

10. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker

This comes in handy to identify typographical errors within the codebase.

12. Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint

This extension validates your HTML helping you to write standards-compliant code.

14. Peacock

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{ "workbench.colorCustomizations": { "activityBar.background": "#e90b8d", "activityBar.foreground": "#fff", "activityBar.inactiveForeground": "#b5b5b5", }, "peacock.affectedElements": [ "activityBar", ]}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

15. Prettier

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

Check out the awesome things you can do with Visual Studio Code here.

Feel free to drop what works for you in the comment section and share this article.

Also, check out my blog for more articles.