エスコートとコードをセットアップする方法

10435 ワード
javascript codenewbie webdev テキストリンク

導入


eslintとprettierはほとんどどこでも使用されている最も人気のあるツールですので、今日は私たちは何のeslintときれいについて話していると我々はどのように簡単にどのように簡単にVSコードでは、任意のエラーを得ることなくそれを設定することが表示されます.

エスリントとは


ESLintは、コードをより一貫して読みやすいようにするためにあなたのtypescript/JavaScriptコードのバグとエラーを特定するのに用いられるツールです.写本とも.Seslint静的に迅速に問題を見つけるためにコードを分析します.多くの問題eslintの検索を自動的に修正することができます.そして、最良の部分は、あなたのプロジェクトのためにそれを必要とする方法を正確に動作するようにeslintをカスタマイズすることができますです.

何がきれいか


Prettierは、あなたのコードをフォーマットするのに役立つツールです.多くの言語をサポートしています.あなたが自分でコードをフォーマットする必要がないので、それはあなたの時間とエネルギーを節約できます.

プレステとエスプリの違い


多くの人々は、eslintを考えて、同じように働きます、しかし、巨大な違いがあります.要するにコードフォーマッタです.以下のケースでは、コードがきれいになる前に、非常に厄介で非常に読みにくいと比較して読みにくいことがわかります.
前に
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
  </head>
        <body>
        <div id="app"></div>
              <script type="module" src="/main.js"></script>
  </body>
</html>
食後に
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
そして、エスリントはリンターです.以下の場合と同様に、Eslintがエラーを与えているのを見ることができます.
import './style.css'

const hello = 'WASSUP GUYS' // 'hello' is declared but its value is never read
ご覧のように、未使用の変数や関数を使用しないでください.

セットアップとesiteのviteできれい


私たちはVITEが私の前に何を読んでいるかわからない場合は、私たちのプロジェクトを作成するために使用するつもりです.VITEプロジェクトを作成するには、端末を開き、特定のディレクトリに移動し、次のコマンドを貼り付けます.
npm init @vitejs/app
あなたのプロジェクトの名前を与え、それがチュートリアルプロジェクトであるバニラJSを選択します.そして、そのフォルダにディレクトリを変更し、すべてのモジュールをインストールします.
cd *your project name*
npm install
npm run dev
さて、下のコードをコピーして、端末にペーストします.プロジェクトフォルダ内にあることを確認します.
npm install -D eslint prettier eslint-config-prettier
ダウンロード後は、パッケージで見ることができます.JSONファイルに依存します.ESLINTをインストールし、VSコードから拡張します.
{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "vite": "^2.3.8"
  }
}
その後、端末上でnpx eslint --initを実行します.次の手順に従います.
How would you like to use ESLint? · To check syntax and find problems 
√ What type of modules does your project use? · JavaScript modules (import/export)
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
その後、あなたはそれに気づくでしょう.エスライントラック.JSファイルがプロジェクトディレクトリに作成されました.を開き、「拡張」プロパティーで優先度を追加します.
// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {},
}
プロジェクトディレクトリとテストの.prettierrcファイルを作成した後、これらの2つの規則を追加します.
{
  "semi": false,
  "singleQuote": true
}
あなたのきれいなファイルだけでなく、それのためのドキュメントをeslintチェックアウトを追加することができますルールがたくさんあります.その後、あなたのJavaScriptファイル内の二重引用符を追加しようとすると自動的に単一の引用符に変更されます.
import './style.css'

const hello = 'WASSUP GUYS'

結論


それで、我々はエラーを得ることなく、ESLILTを準備して、Vsコードできれいにする方法について話しました.あなたがeslintとprettierについてのどんな問題もあるならば、コメントセクションで尋ねてください.これは、きれいでeslintのためのかなり基本的なセットアップであり、私は非常にあなたがドキュメントに従うことをお勧めします.ほとんどの人が使用するairbnbの設定も使えます.
13タイプミスユーティリティ:開発者のためのカンニングペーパー
マルチパート:境界が見つかりません