Visual Studioのコードでeslint & prettierでtypescript

さて、もしあなたがこの記事につまずいた場合、チャンスは、おそらくこの情報を迅速かつ簡単に可能な限りです.
私は物事をできるだけ短く保つつもりです、しかし、我々はステップバイステップですべてを歩いています.
ここでは、すべてが今日設定されることについての簡単な紹介です.

Type 4はJavaScriptの進化であり、これは厳密なタイピングをもたらすJavaScript言語へ.あなたがより多くのことに興味があるならば、私はTypeScriptを紹介している記事を全部持っています.

eslintは、コードベースのエラーのためのコードをスキャンし、あなたが行くように(“リンギング”として知られている)修正を提供するツールです.

要するに、コードフォーマッタを使用してコードを整形して、それがきれいに見えるようにします.

ビデオを好む？

我々が始める前に-私は、それの以下のステップのすべてで利用できるビデオを録画しました
閉じるこの動画はお気に入りから削除されています.

ホールドアップ-なぜこのガイドはそんなに長いですか？

これらのツールをすばやく起動して走る他の方法がありますnpx コマンド、すべてをプリインストールします.
ここでは、代わりにこの(長い)ガイドに従うべきだと思います.

あなたが何をインストールしているかについての完全な透明性

すべてのステップバイステップをインストールすると、これらのツールのいずれかが失敗した場合、特定のバグをデバッグしやすくなります

個々のツールのより大きな理解を拡張したり、ツールの動作のいずれかを変更しやすくなります!

ただコードをしたいですか？

すべてのそれを言った-あなたはむしろ起きて、すぐに実行したい場合は、私はこのガイドで説明されたすべてのGitレポを書いている.入手可能right here.
それが役に立つならば、私は星に感謝します!✨
まだここ?ああ!ショーで!

インストール

Step 1 :プロジェクトのルートとして使用する新しいフォルダを作成します.コマンドラインで次のコマンドを入力しますmy-new-project プロジェクト名を指定します)

mkdir my-new-project

Step 2 :次は糸を使ってプロジェクトを設定する必要があります.これを行うには、作成したフォルダを入力し、プロジェクトを初期化する必要があります.

cd my-new-project
yarn init

これは、我々が我々のプロジェクトのすべての関連情報を入力することができるインタラクティブな一連のステップを与えなければなりません.
何か特定のものを持っている場合は、これらのすべての値を入力してください.
注意を払う唯一のものはエントリーポイントです-あなたが入ることを確認してください./build/index.js 単なるindex.js . 私は、なぜ記事の後でハイライトします.

ステップ3 :さて、我々がプロジェクトを初期化した今、私たちのプロジェクトに入力してください.
同じコマンドラインを使用するmy-new-project 次のコマンドを入力します.

yarn add typescript --dev

これは私たちのタイプスクリプトをdevDependencies . 違いの詳細についてはdependencies and devDependencies , チェックアウトできる記事がありますright here .
Step 4 :インストールされた後、私たちは、タイプスクリプトの設定ファイルを作成する必要があります.
これを作成するには、次のコマンドを入力します.

touch ./tsconfig.json

ステップ5 :次に、私たちのtypescriptファイルを格納するフォルダを作成し、index.ts 始めるファイル.コマンドラインで、次のコマンドを入力します.

mkdir ./src
touch ./src/index.ts

グレート-今私たちのプロジェクトのディレクトリにフォルダを作成したと呼ばれるsrc , と呼ばれる単一のファイルを作成しindex.ts インサイド.
ステップ6 :次は、あなたが開きますtsconfig.json vscodeを使って作成したファイル.
私たちのタイプスクリプトの設定を可能な限り簡単な設定で設定するつもりです.お気軽にコピーして貼り付け、次の構成を貼り付ける(コメントを削除するには無料で感じる-彼らは、より多くの場合は、それぞれの行が何を知っているようにする必要はありません!)
< div >
注:あなたがこのプロジェクトを後で反応させる計画を立てているならば、反応特定のBalloboneがありますtsconfig.json あなたはhere

についてtsconfig.json そして、セットアップ中に使用できるパラメータの全ては、official TypeScript handbook. .

Step 7 :最終的にルートフォルダを開きます(一つのファイルだけではありません!)vscodeで< http ://p >
あなたは今、あなたの中にタイプスクリプトを書くことができるはずですindex.ts ファイル!すべてを確認してください.ts 内部のファイルsrc フォルダ(または中のサブディレクトリ)src ) コンパイラがすべてをキャッチするようにします.p >
PHPスクリプトをJavaScriptファイルに構築するには、以下のコマンドをルートディレクトリから実行します.
<> P >
クラスをハイライト表示する

yarn tsc -p ./tsconfig.json

< div >

エスライン

Alright , eslintにリンクされたコードベースを取得しましょう!p >
Step 1 :最初に、vscodeに関連するeslintプラグインをインストールします.スクリーンの左側にあるエクステンションバーのeslintを検索し、インストールしてインストールします.p >
< P >

ステップ2 :コマンドラインをもう一度開き、プロジェクトのルートディレクトリに移動します.そこから、すべての必要なライブラリをインストールしたいと思います.p >
次のコマンドを入力します.
<> P >
クラスをハイライト表示する

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

< div >
<高橋>
<ウル>

エスリントコアパッケージ

@タイプスクリプトEslint/Eslintプラグイン-具体的にタイプスクリプトをサポートするeslintのためのプラグイン

Insertのための更なるサポート

< ull >
Step 3 :次はコマンドラインに入っていますが、設定ファイルを設定する必要があります.p >
次のコマンドを入力します.
<> P >
クラスをハイライト表示する

touch .eslintrc

< div >
<ノート>. の初めにeslintrc . それは本当に重要です-あなたがそれをお見逃しなく確認してくださいp >
Step 4 :セットアップを終了するには、.eslintrc 我々がちょうど作成したファイル.既にvscode openを使用している場合は、.eslintrc プロジェクトツリーでp >
ここでは、Visual Studioのコードについて説明します.
< P >

現在では.eslintrc がオープンされている場合、以下のように更新されます.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Sarghm/ed3c285b3738faa1d8a27a31ba64d400.js//>
< div >
この設定は、インストールした全てのライブラリを適用します.p >
Step 5 : vscodeを再起動!p >
ステップ6 :あなたは、現在、観察することができなければなりませんESLint ステータスバー(画面の右下隅)のマーカーp >
< P >

上記のイメージのように見えるならば.全部セットです!p >
しかしながら、以下のようになります.
< P >

< p >それをクリックする必要がありますし、必要に応じてワークスペースを与えてeslintを使用する必要があります.その後、1つの最後のIDEの再起動を実行する必要があります!p >

前途

ほとんどそこに!環境をきれいに使うように設定しましょうp >
Step 1 :もう一度コマンドラインを開き、プロジェクトのルートディレクトリに移動します.私たちは、いくつかの新しいパッケージをインストールします.br/>
<> P >
クラスをハイライト表示する

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

< div >
ステップ2 :次に、私たちを開きましょう.eslintrc ファイルを追加し、新しいライブラリをextends 設定の配列p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Sarghm/fab8138b7746434f52217a870f3b57b7.js//>
< div >
( P ) :その内容の順序extends 配列は、行の後に何か問題が起きないようにするために非常に重要です);p >
ステップ3 :最後に最後にvscodeを再起動します.p >
そして、それは-安心のため息を吐くこと自由に感じなさい.あなたはそれをやった!あなたは、typescript、eslintときれいなプロジェクトをセットアップしました!p >

概要

< p >それはあなたの環境を準備するために多くの地獄のように感じます、しかし、私は正直に、あなたが一度このプロセスを経験して、すべての別々の構成要素がどのように一緒に来るかについての理解があるならば、本当にこれらのツールのどれが失敗するかについて、それが本当により簡単に物事を作ると信じます.今あなたが嵐を勇敢にした今、あなたはあなたの心のコンテンツにeslintをカスタマイズし、きれいに偉大な位置にする必要がありますp >

つの最後のもの.

< P >

私はJavaScript開発者のために特別に書かれた16パートのタイプミスコースを作りました.あなたが興味があるならば、それは私の上で見ることができます.また、このコンテンツをサポートすることもできます.p >
読んでくれてありがとう!p >