この記事では主に、Vue3 での開発に TypeScript を使用してコーディング標準を向上させる際に、EsLint と Prettier をインストールして設定する方法を紹介します。 使用EsLintの使用依存関係をインストールする npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin 4 つの依存関係は次のとおりです。
プロフィールを追加する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 つの依存関係は次のとおりです。
プロフィールを追加する プロジェクトのルートディレクトリに.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/推奨' で:
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進捗」 ] } 参考文献プリティエ公式サイト vue3+ts+EsLint+Prettier 標準コードの実装に関するこの記事はこれで終わりです。より関連性の高い vue3 ts 標準コードコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明
ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...
以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...
LinuxサーバーのデフォルトのSSHポート番号は通常22なので、ほとんどのユーザーはセキュリティ上...
目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...
まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...
ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...
この記事では主に、Tencent TIM インスタント メッセージングを Vue と統合する方法を紹...
導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...
戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...
1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...
MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...
Linux は現在最も広く使用されているサーバー オペレーティング システムです。Unix をベー...
この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
目次序文Axiosのインストールと設定シンプルなGETリクエストを開始するPOSTリクエストを行うシ...