vue3+ts+EsLint+Prettier Standardcode-Implementierung

vue3+ts+EsLint+Prettier Standardcode-Implementierung

Dieser Artikel stellt hauptsächlich vor, wie EsLint und Prettier installiert und konfiguriert werden, wenn TypeScript für die Entwicklung in Vue3 verwendet wird, um die Codierungsstandards zu verbessern.
(1) EsLint stellt Kodierungsstandards zur Verfügung;
(2) Prettier ist ein Tool zur eigensinnigen Codeformatierung.

verwenden

Verwendung von EsLint

Abhängigkeiten installieren

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

Die vier Abhängigkeiten sind:

  • - `eslint`: Der Kerncode von EsLint
  • - `eslint-plugin-vue`: [Ein Plugin zur Verwendung von Eslint für Vue](https://eslint.vuejs.org/)
  • - `@typescript-eslint/parser`: Parser von ESLint, der zum Parsen von Typescript verwendet wird und so Typescript-Code überprüft und standardisiert
  • - `@typescript-eslint/eslint-plugin`: Dies ist ein ESLint-Plugin, das verschiedene definierte Spezifikationen zum Erkennen von Typescript-Code enthält

Hinzufügen eines Profils

npx eslint --init

Fügen Sie die Datei .eslintrc.js im Stammverzeichnis hinzu. (Es wird empfohlen, eine JS-Datei auszuwählen, JSON kann keine Kommentare schreiben.) Durch Ändern der Konfigurationsdatei wird hauptsächlich die entsprechende Konfiguration in den Regeln geändert. Weitere Einzelheiten finden Sie in der offiziellen Konfiguration

/*!
 * https://eslint.bootcss.com/docs/rules/
 * https://eslint.vuejs.org/rules/
 *
 * - 0: aus
 * - 1: warn
 * - 2: Fehler
 */
modul.exporte = {
  Wurzel: wahr,
  Umgebung: {
    Browser: wahr,
    Knoten: wahr,
    es6: wahr
  },
  Parser: „vue-eslint-parser“,
  Parseroptionen: {
    Parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    Quelltyp: "Modul",
    jsxPragma: "Reagieren",
    ecmaFunktionen: {
      jsx: wahr
    }
  },
  Globale:
    AMap: falsch,
    AMapUI: falsch
  },
  erweitert: [
    „Plugin:vue/vue3-empfohlen“,
    „plugin:@typescript-eslint/empfohlen“,
    'hübscher',
    „Plugin:prettier/empfohlen“
  ],
  Regeln:
    '@typescript-eslint/ban-ts-ignore': 'aus',
    '@typescript-eslint/explicit-function-return-type': 'aus',
    '@typescript-eslint/no-explicit-any': 'aus',
    '@typescript-eslint/no-var-requires': 'aus',
    '@typescript-eslint/no-empty-function': 'aus',
    'vue/custom-event-name-casing': 'aus',
    'keine Verwendung vor der Definition': 'aus',
    '@typescript-eslint/no-use-before-define': 'aus',
    '@typescript-eslint/ban-ts-comment': 'aus',
    '@typescript-eslint/ban-types': 'aus',
    '@typescript-eslint/no-non-null-assertion': 'aus',
    '@typescript-eslint/explicit-module-boundary-types': 'aus',
    '@typescript-eslint/keine-unbenutzten-vars': [
      'Fehler',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }
    ],
    'keine unbenutzten Variablen': [
      'Fehler',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_'
      }
    ],
    'Leerzeichen vor Funktionsklammer': 'aus',
    'vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing erzwingt eine bestimmte Größe für Komponentendefinitionsnamen 'vue/attributes-order': 'off',
    'vue/eine-Komponente-pro-Datei': 'aus',
    'vue/html-closing-bracket-newline': 'aus',
    'vue/max-attributes-per-line': 'aus',
    'vue/multiline-html-element-content-newline': 'aus',
    'vue/singleline-html-element-content-newline': 'aus',
    'vue/attribute-hyphenation': 'aus',
    'vue/require-default-prop': 'aus',
    'vue/script-setup-uses-vars': 'aus',
    'vue/html-selbstschließend': [
      'Fehler',
      {
        html: {
          void: 'immer',
          normal: 'nie',
          Komponente: „immer“
        },
        svg: "immer",
        Mathematik: „immer“
      }
    ]
  }
}

Verwendung von Prettier

Abhängigkeiten installieren

npm i --save-dev schöner eslint-config-schöner eslint-plugin-schöner

Die drei Abhängigkeiten sind:

  • - `prettier`: der Kerncode des Prettier-Plugins
  • - „eslint-config-prettier“: löst den Konflikt zwischen den Stilspezifikationen in ESLint und Prettier und nimmt die Stilspezifikationen von Prettier als Priorität, wodurch die Stilspezifikationen in ESLint automatisch ungültig werden.
  • - `eslint-plugin-prettier`: Verwenden Sie Prettier als ESLint-Spezifikation

Hinzufügen eines Profils

Erstellen Sie eine .prettierrc.js-Datei im Stammverzeichnis des Projekts und fügen Sie die folgende Konfiguration hinzu

modul.exporte = {
  printWidth: 120, // Schwellenwert für Zeilenumbruchzeichenfolge tabWidth: 2, // Anzahl der Leerzeichen für jede horizontale Einrückung des Werkzeugs festlegen useTabs: false,
  semi: false, // Ob am Ende des Satzes ein Semikolon hinzugefügt werden soll vueIndentScriptAndStyle: true,
  singleQuote: true, // Einfache Anführungszeichen verwenden trailingComma: 'none', // Dem letzten Element eines Objekts ein Komma hinzufügen bracketSpacing: true, // Objekten und Arrays Leerzeichen hinzufügen jsxBracketSameLine: true, // Beginnt jsx > eine neue Zeile arrowParens: 'always', // Braucht (x) => {} Klammern requirePragma: false, // @prettier muss nicht am Anfang der Datei geschrieben werden
  insertPragma: false // @prettier muss nicht automatisch am Anfang der Datei eingefügt werden
}

Prettier zu EsLint hinzufügen

Ändern Sie die Datei `.eslintrc.js` und fügen Sie Erweiterungen hinzu

    'hübscher',
    „Plugin:prettier/empfohlen“

In:

  • - `prettier/@typescript-eslint`: macht die Stilspezifikation in @typescript-eslint ungültig und folgt der Stilspezifikation in prettier
  • - „plugin:prettier/recommended“: Verwenden Sie die Stilspezifikationen in Prettier. Wenn ESLint aktiviert ist, werden Formatierungsprobleme in Prettier erkannt und auch als Fehler ausgegeben.

Erstellen Sie Code mit Husky und Lint-Staged

Abhängigkeiten installieren

npm i --save-dev husky lint-staged

Ändern Sie package.json
Fügen Sie den folgenden Code hinzu

    "Husky": {
        "Haken": {
            „Vorab-Commit“: „lint-staged“
        }
    },
    "lint-staged": {
        "Quelle*/**/*.ts": [
            "prettier --config.prettierrc.js --write",
            "eslint",
            "git add"
        ],
        "Quelle*/**/*.json": [
            "prettier --config.prettierrc.js --write",
            "eslint",
            "git add"
        ]
    }

Auf diese Weise überprüft EsLint beim Ausführen von „git commit“ den übermittelten Code.

Setting.json-Konfiguration hinzufügen

Fügen Sie die Konfigurationsdatei „setting.json“ im Ordner „.vscode“ hinzu, um den Code beim automatischen Speichern automatisch zu reparieren und zu überprüfen.

{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": wahr,
  "volar.tsPlugin": wahr,
  "volar.tsPluginStatus": falsch,
  //===========================================
  //============= Herausgeber =======================
  //===========================================
  "explorer.openEditors.visible": 0,
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "diffEditor.ignoreTrimWhitespace": falsch,
  //===========================================
  //============= Andere ========================
  //===========================================
  "breadcrumbs.enabled": wahr,
  "open-in-browser.default": "Chrome",
  //===========================================
  //============= Dateien ========================
  //===========================================
  "files.eol": "\n",
  "Suche.Ausschließen": {
    "**/node_modules": wahr,
    "**/*.log": wahr,
    "**/*.log*": wahr,
    "**/bower_components": wahr,
    "**/dist": wahr,
    "**/elehukouben": wahr,
    "**/.git": wahr,
    "**/.gitignore": wahr,
    "**/.svn": wahr,
    "**/.DS_Store": wahr,
    "**/.idea": wahr,
    "**/.vscode": falsch,
    "**/yarn.lock": wahr,
    "**/tmp": wahr,
    "out": wahr,
    "dist": wahr,
    "node_modules": wahr,
    "CHANGELOG.md": wahr,
    "Beispiele": wahr,
    "res": wahr,
    "Screenshots": wahr,
    "yarn-error.log": wahr,
    "**/.yarn": wahr
  },
  "Dateien.ausschließen": {
    "**/.cache": wahr,
    "**/.editorconfig": wahr,
    "**/.eslintcache": wahr,
    "**/bower_components": wahr,
    "**/.idea": wahr,
    "**/tmp": wahr,
    "**/.git": wahr,
    "**/.svn": wahr,
    "**/.hg": wahr,
    "**/CVS": wahr,
    "**/.DS_Store": wahr
  },
  "files.watcherExclude": {
    "**/.git/objects/**": wahr,
    "**/.git/subtree-cache/**": wahr,
    "**/.vscode/**": wahr,
    "**/node_modules/**": wahr,
    "**/tmp/**": wahr,
    "**/bower_components/**": wahr,
    "**/dist/**": wahr,
    "**/yarn.lock": wahr
  },
  "stylelint.enable": wahr,
  "stylelint.packageManager": "Garn",
  "liveServer.settings.donotShowInfoMsg": wahr,
  "telemetry.enableCrashReporter": falsch,
  "workbench.settings.enableNaturalLanguageSearch": falsch,
  "Pfad-Intellisense.Mappings": {
    "/@/": "${workspaceRoot}/src"
  },
  "prettier.requireConfig": wahr,
  "typescript.updateImportsOnFileMove.enabled": "immer",
  "workbench.sideBar.location": "links",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[Typoskript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[Typoskriptreagieren]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[weniger]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[Abschrift]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": wahr
  },
  "[Ansicht]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": falsch
    }
  },
  "cSpell.words": [
    "vben",
    "windi",
    "Browserliste",
    "Rückenwindcss",
    "esnext",
    "antv",
    "winzig",
    "QR-Code",
    "Seiter",
    "Pinien",
    "Seiter",
    "Fortschritt"
  ]
}

Verweise

Offizielle Website von Prettier
Offizielle EsLint-Website
EsLint-Regeln
Prettier Lesen Sie einfach diesen Artikel Verwenden Sie EsLint+Prettier, um TypeScript-Code zu standardisieren

Dies ist das Ende dieses Artikels über die Implementierung des Standardcodes vue3+ts+EsLint+Prettier. Weitere relevante Inhalte zum Standardcode vue3 ts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung von ESLint in Vue
  • Vue-Scaffolding - Vue-CLI - Lern- und Verwendungstutorial
  • So verwenden Sie eslint und editorconfig in Vue

<<:  So ändern Sie in Nginx die über http aufgerufene Website in https

>>:  W3C Tutorial (7): W3C XSL Aktivitäten

Artikel empfehlen

Einführung in 10 Hooks in React

Inhaltsverzeichnis Was ist ReactHook? React biete...

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Ja...

So beheben Sie den Fehler "ERROR 1045 (28000)" beim Anmelden bei MySQL

Heute habe ich mich beim Server angemeldet und mi...

Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...

So fügen Sie schnell 10 Millionen Datensätze in MySQL ein

Ich habe gehört, dass es eine Interviewfrage gibt...

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

In diesem Artikelbeispiel wird der spezifische Co...

CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

Manchmal benötigen unsere Seiten Eingabeaufforder...

So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox

1. Einleitung Vagrant ist ein Tool zum Erstellen ...

Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Vorbereitung 1. Starten Sie die virtuelle Maschin...

Lassen Sie uns über Parameter in MySQL sprechen

Vorwort: In einigen früheren Artikeln haben wir h...

HTML-Tutorial: Definitionsliste

<br />Originaltext: http://andymao.com/andy/...

Detailliertes Tutorial zur Installation von MySQL 8.0.13 (rpm) auf Centos7

yum oder rpm? Die Yum-Installationsmethode ist se...

Einführung und Verwendung von Triggern und Cursorn in MySQL

Trigger-Einführung Ein Trigger ist eine spezielle...

Detaillierte Erläuterung der Inline-Blocklayout-Implementierung des CSS-Anzeigeattributs

CSS-Anzeigeeigenschaft Hinweis: Wenn !DOCTYPE ang...

Implementierung eines Puzzlespiels mit js

In diesem Artikel wird der spezifische Code von j...