この記事では主に、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 グリッドシステムの柔軟な使用方法の詳細な説明
JSON (JavaScript Object Notation、JS Object Notatio...
はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...
問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...
モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...
開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...
この記事では、主に次のような Vue ドラッグ アンド ドロップの簡単な実装を紹介します。レンダリン...
最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...
ブラウザがHTMLを読み込みレンダリングする順序1. IE は上から下へダウンロードし、上から下へレ...
起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...
実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...
インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...
MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...
まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...
目次addEventListener が必要な理由は何ですか? addEventListener を...