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進データ型変換の実装

推薦する

nginx-naxsi ホワイトリストルールの詳細な説明

ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

CentOS のデフォルトの SSH ポート番号を変更する方法の例

LinuxサーバーのデフォルトのSSHポート番号は通常22なので、ほとんどのユーザーはセキュリティ上...

MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

ウェブフロントエンドに対する一般的な攻撃とその防止方法

ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...

Vue は Tencent TIM インスタント メッセージングを統合します

この記事では主に、Tencent TIM インスタント メッセージングを Vue と統合する方法を紹...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする

戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...

MySQLのMVCCマルチバージョン同時実行制御の実装

1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

Linux と最もよく使用されるコマンドの紹介 (習得は簡単ですが、問題の 95% 以上を解決できます)

Linux は現在最も広く使用されているサーバー オペレーティング システムです。Unix をベー...

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...

Dockerイントラネット侵入FRP展開の実装プロセスの分析

1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...

Axios を使用して Vue2 がリクエストを開始する詳細なプロセス記録

目次序文Axiosのインストールと設定シンプルなGETリクエストを開始するPOSTリクエストを行うシ...