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

HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren

Einführung Kürzlich musste ich für einen großen A...

Detaillierte Analyse der MySQL MDL-Metadatensperre

Vorwort: Wenn Sie eine SQL-Anweisung in MySQL aus...

Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen

1. Elemente und Tags in HTML <br />Ein Elem...

FastDFS- und Nginx-Integration zur Codeanalyse

FastDFS- und Nginx-Integration: Der Tracker wird ...

Reagieren Sie mit Beispielcode zur Implementierung der automatischen Browseraktualisierung

Inhaltsverzeichnis Was ist Front-End-Routing? Wie...

Lösung für Ubuntu 20.04 Firefox kann keine Videos abspielen (Flash-Plug-In fehlt)

1. Downloadadresse für das Flash-Plug-in-Paket: h...

Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)

I. Überblick Beim Schreiben von HTML-Vorlagen wer...

Farbabstimmungstechniken und Effektdarstellung für Beauty- und Styling-Websites

Farbe ist eines der wichtigsten Elemente jeder We...

Implementierung von MySQL Select in der Unterabfrageoptimierung

Die folgende Demonstration basiert auf MySQL Vers...

Tutorial zur Installation und Kennwortkonfiguration von MySQL 5.7.21

Tutorial zur Installation und Kennworteinstellung...

5 Dinge, die beim Schreiben von React-Komponenten mit Hooks zu beachten sind

Inhaltsverzeichnis 01. Verwenden Sie useState, we...

Installieren Sie drei oder mehr Tomcats unter einem Linux-System (detaillierte Schritte)

Wenn Sie mehrere Tomcats installieren möchten, mü...

Detaillierte Erläuterung der Nginx Rewrite-Nutzungsszenarien und Codebeispiele

Nginx Rewrite-Nutzungsszenarien 1. Sprung der URL...

js zur Implementierung eines Web-Rechners

Wie erstelle ich mit HTML, CSS und JS einen einfa...

Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen

Inhaltsverzeichnis Vue2.x-Nutzung Globale Registr...