vue3+ts+EsLint+Prettier 標準コード実装

vue3+ts+EsLint+Prettier 標準コード実装

この記事では主に、Vue3 での開発に TypeScript を使用してコーディング標準を向上させる際に、EsLint と Prettier をインストールして設定する方法を紹介します。
(1)EsLintはコーディング標準を提供します。
(2)Prettierは独自のコードフォーマットツールです。

使用

EsLintの使用

依存関係をインストールする

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

4 つの依存関係は次のとおりです。

  • - `eslint`: EsLintのコアコード
  • - `eslint-plugin-vue`: [Vue で Eslint を使用するためのプラグイン](https://eslint.vuejs.org/)
  • - `@typescript-eslint/parser`: ESLint のパーサー。Typescript を解析して Typescript コードをチェックおよび標準化するために使用されます。
  • - `@typescript-eslint/eslint-plugin`: これは、Typescriptコードを検出するためのさまざまな定義済み仕様を含むESLintプラグインです。

プロフィールを追加する

npx eslint --init

ルート ディレクトリに .eslintrc.js ファイルを追加します。 (jsファイルを選択することをお勧めします。jsonはコメントを書き込むことができません)設定ファイルの変更は主にルール内の関連する設定を変更します。詳細については、公式の設定を参照してください。

/*!
 * https://eslint.bootcss.com/docs/rules/
 * https://eslint.vuejs.org/rules/
 *
 * - 0: オフ
 * - 1: 警告する
 * - 2: エラー
 */
モジュール.エクスポート = {
  ルート: true、
  環境: {
    ブラウザ: true、
    ノード: true、
    es6: 真
  },
  パーサー: 'vue-eslint-parser',
  パーサーオプション: {
    パーサー: '@typescript-eslint/parser',
    ecmaバージョン: 2020,
    ソースタイプ: 'モジュール',
    jsxプラグマ: 'React'、
    ecma機能: {
      jsx: 真
    }
  },
  グローバル:
    Aマップ: 偽、
    AMapUI: 偽
  },
  拡張: [
    'プラグイン:vue/vue3-推奨',
    'プラグイン:@typescript-eslint/推奨',
    「もっときれい」
    'plugin:prettier/推奨'
  ]、
  ルール:
    '@typescript-eslint/ban-ts-ignore': 'オフ',
    '@typescript-eslint/明示的な関数の戻り値': 'オフ'、
    '@typescript-eslint/no-explicit-any': 'オフ',
    '@typescript-eslint/no-var-requires': 'オフ',
    '@typescript-eslint/no-empty-function': 'オフ',
    'vue/カスタムイベント名の大文字小文字': 'オフ'、
    '定義前に使用しない': 'オフ'、
    '@typescript-eslint/no-use-before-define': 'オフ',
    '@typescript-eslint/ban-ts-comment': 'オフ',
    '@typescript-eslint/ban-types': 'オフ',
    '@typescript-eslint/no-non-null-assertion': 'オフ'、
    '@typescript-eslint/明示的なモジュール境界型': 'オフ'、
    '@typescript-eslint/未使用変数なし': [
      'エラー'、
      {
        無視パターン: '^_',
        無視パターン: '^_'
      }
    ]、
    '未使用変数なし': [
      'エラー'、
      {
        無視パターン: '^_',
        無視パターン: '^_'
      }
    ]、
    '関数の括弧の前のスペース': 'オフ'、
    'vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing はコンポーネント定義名に特定のサイズを強制します 'vue/attributes-order': 'off',
    'vue/ファイルごとに1つのコンポーネント': 'オフ'、
    'vue/html-close-bracket-newline': 'オフ',
    'vue/行あたりの最大属性数': 'オフ',
    'vue/multiline-html-element-content-newline': 'オフ',
    'vue/singleline-html-element-content-newline': 'オフ',
    'vue/attribute-hyphenation': 'オフ'、
    'vue/require-default-prop': 'オフ'、
    'vue/script-setup-uses-vars': 'オフ'、
    'vue/html-self-closing': [
      'エラー'、
      {
        html: {
          void: '常に'、
          通常: 「決してない」、
          コンポーネント: '常に'
        },
        svg: '常に',
        数学: 「常に」
      }
    ]
  }
}

Prettierの使用

依存関係をインストールする

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

3 つの依存関係は次のとおりです。

  • - `prettier`: prettierプラグインのコアコード
  • - `eslint-config-prettier`: ESLintとprettierのスタイル仕様の競合を解決し、prettierのスタイル仕様を優先して、ESLintのスタイル仕様を自動的に無効にします。
  • - `eslint-plugin-prettier`: ESLint仕様としてprettierを使用する

プロフィールを追加する

プロジェクトのルートディレクトリに.prettierrc.jsファイルを作成し、次の設定を追加します。

モジュール.エクスポート = {
  printWidth: 120, // 改行文字列のしきい値 tabWidth: 2, // ツールの水平インデントごとのスペース数を設定する useTabs: false,
  semi: false, // 文末にセミコロンを追加するかどうか vueIndentScriptAndStyle: true,
  singleQuote: true, // 一重引用符を使用します trailingComma: 'none', // オブジェクトの最後の要素にカンマを追加します bracketSpacing: true, // オブジェクトと配列にスペースを追加します jsxBracketSameLine: true, // jsx > は新しい行を開始します arrowParens: 'always', // (x) => {} には括弧が必要です requirePragma: false, // ファイルの先頭に @prettier を書く必要はありません
  insertPragma: false // ファイルの先頭に @prettier を自動的に挿入する必要はありません
}

EsLint に Prettier を追加する

`.eslintrc.js`ファイルを修正し、extendsを追加します。

    「もっときれい」
    'plugin:prettier/推奨'

で:

  • - `prettier/@typescript-eslint`: @typescript-eslint のスタイル指定を無効にし、prettier のスタイル指定に従います
  • - `plugin:prettier/recommended`: prettier のスタイル仕様を使用します。ESLint が有効になっている場合は、prettier でフォーマットの問題を検出し、フォーマットの問題をエラーとしてスローします。

huskyとlint-stagedを使用してコードをビルドする

依存関係をインストールする

npm i --save-dev ハスキー lint-staged

package.json を変更する
次のコードを追加します

    「ハスキー」:{
        「フック」: {
            「事前コミット」: 「lint ステージング」
        }
    },
    「lintステージング」: {
        "src*/**/*.ts": [
            "prettier --config .prettierrc.js --write",
            「エスリント」、
            「git 追加」
        ]、
        "src*/**/*.json": [
            "prettier --config .prettierrc.js --write",
            「エスリント」、
            「git 追加」
        ]
    }

このように、git commit を実行すると、EsLint は送信されたコードをチェックします。

setting.json 設定を追加する

自動保存時にコードを自動的に修復および検証するには、.vscode フォルダーに `setting.json` 構成ファイルを追加します。

{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true、
  "volar.tsPlugin": true、
  "volar.tsPluginStatus": false,
  //===========================================
  //============== エディター =======================
  //===========================================
  "explorer.openEditors.visible": 0,
  "エディター.タブサイズ": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "diffEditor.ignoreTrimWhitespace": false,
  //===========================================
  //============== その他 =========================
  //===========================================
  "breadcrumbs.enabled": true、
  "ブラウザで開く.default": "chrome",
  //===========================================
  //============== ファイル =========================
  //===========================================
  "files.eol": "\n",
  "検索除外": {
    "**/node_modules": 真、
    "**/*.log": 真、
    "**/*.log*": 真、
    "**/bower_components": 真、
    "**/dist": 真、
    "**/elehukouben": true、
    "**/.git": 真、
    "**/.gitignore": 真、
    "**/.svn": 真、
    "**/.DS_Store": 真、
    "**/.idea": 真、
    "**/.vscode": 偽、
    "**/yarn.lock": 真、
    "**/tmp": 真、
    「アウト」:真、
    「距離」:真、
    "node_modules": 真、
    "CHANGELOG.md": 真、
    「例」: true、
    "res": 真、
    「スクリーンショット」:true、
    "yarn-error.log": true、
    "**/.yarn": 真
  },
  "ファイル.除外": {
    "**/.cache": 真、
    "**/.editorconfig": true、
    "**/.eslintcache": 真、
    "**/bower_components": 真、
    "**/.idea": 真、
    "**/tmp": 真、
    "**/.git": 真、
    "**/.svn": 真、
    "**/.hg": 真、
    "**/CVS": 真、
    "**/.DS_Store": 真
  },
  "files.watcherExclude": {
    "**/.git/objects/**": 真、
    "**/.git/subtree-cache/**": true、
    "**/.vscode/**": 真、
    "**/node_modules/**": 真、
    "**/tmp/**": 真、
    "**/bower_components/**": 真、
    "**/dist/**": 真、
    "**/yarn.lock": 真
  },
  "stylelint.enable": 真、
  "stylelint.packageManager": "ヤーン",
  "liveServer.settings.donotShowInfoMsg": true,
  "telemetry.enableCrashReporter": false、
  "workbench.settings.enableNaturalLanguageSearch": false,
  "パスインテリセンスマッピング": {
    "/@/": "${workspaceRoot}/src"
  },
  "prettier.requireConfig": true、
  "typescript.updateImportsOnFileMove.enabled": "常に",
  "workbench.sideBar.location": "左",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[少ない]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[マークダウン]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": 真
  },
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": 偽
    }
  },
  "cSpell.words": [
    「vben」、
    「ウィンディ」、
    「ブラウザリスト」、
    "テールウィンドcss",
    「esnext」、
    「アントビ」、
    「ちっちゃい」、
    「QRコード」、
    「サイダー」、
    「ピニア」、
    「サイダー」、
    「n進捗」
  ]
}

参考文献

プリティエ公式サイト
EsLint公式サイト
EsLintルール
Prettier この記事を読んでください EsLint+Prettier を使用して TypeScript コードを標準化する

vue3+ts+EsLint+Prettier 標準コードの実装に関するこの記事はこれで終わりです。より関連性の高い vue3 ts 標準コードコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueでのESLintの使用に関する詳細な説明
  • Vue スキャフォールディング vue-cli 学習と使用チュートリアル
  • Vue で eslint と editorconfig を使用する方法

<<:  プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

>>:  mysql 10進データ型変換の実装

推薦する

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

MySQL-8.0.26 構成グラフィックチュートリアル

はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...

CSSレコードテキストアイコン配置のいくつかのソリューション

開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...

Vue ドラッグ アンド ドロップのシンプルな実装

この記事では、主に次のような Vue ドラッグ アンド ドロップの簡単な実装を紹介します。レンダリン...

ウェブサイトはいつ広告を掲載すべきでしょうか?

最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...

HTMLページの読み込みと解析プロセスの詳細な紹介

ブラウザがHTMLを読み込みレンダリングする順序1. IE は上から下へダウンロードし、上から下へレ...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

jsでシンプルなパズルゲームを実現する

この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...

MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

JavaScriptのonclickとclickの違いの詳細な説明

目次addEventListener が必要な理由は何ですか? addEventListener を...