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

CSS3 realisiert die Mask Barrage-Funktion

Kürzlich habe ich auf der B-Station einen Sperrfe...

Beim Upgrade von MySQL auf 5.7 meldet WordPress beim Importieren von Daten den Fehler 1067

Ich habe kürzlich MySQL auf 5.7 aktualisiert und ...

Mehrere Möglichkeiten, „Textüberlaufkürzung und -auslassung“ mit reinem CSS zu implementieren

In unserer täglichen Entwicklungsarbeit sind Text...

Detaillierte Erläuterung des grundlegenden Falls des React.js-Frameworks Redux

react.js Rahmen Redux https://github.com/reactjs/...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

MySQL-Sortierung zum Abrufen eines Ranking-Beispielcodes

Der Code sieht folgendermaßen aus: SELECT @i:=@i+...

Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

Syntax: <marquee> …</marquee> Mithilfe...

52 SQL-Anweisungen, die Ihnen Leistungsoptimierung beibringen

1. Um die Abfrage zu optimieren, sollten Sie voll...

Eine detaillierte Erklärung der DIV+CSS-Benennungsregeln kann zur SEO-Optimierung beitragen

1. Benennungskonventionen für CSS-Dateien Vorschl...

Beispiel zum Erstellen von Tabellenanweisungen für den Benutzer Scott in der MySQL-Version von Oracle

Überblick: Oracle Scott-Benutzer haben vier Tabel...

So implementieren Sie mit CSS3 eine Warteschlangenanimation ähnlich einer Online-Liveübertragung

Ein Freund in der Gruppe hat zuvor eine Frage ges...

HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten

1. Anwendung von Multimedia in HTML_Flash-Animati...

So verwenden Sie den Yum-Befehl

1. Einführung in yum Yum (vollständiger Name Yell...

Beispielcode für HTML-Layout links und rechts

CSS: Code kopieren Der Code lautet wie folgt: html...

MySQL-Reihe: Grundlegende Konzepte der relationalen MySQL-Datenbank

Inhaltsverzeichnis 1. Grundlegende Konzepte 2. En...