vue.js - Kako konfigurirati Vue CLI 4 s ESLint + Prettier + Airbnb pravilima + TypeScript + Vetur?

Prilikom stvaranja novog projekta s Vue CLI v4.0.5 uz provjeru opcija za TypeScript i Linter/Formatter, dobivate unaprijed konfigurirane opcije za lintanje i formatiranje:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

Želim koristiti Airbnb pravila za ESLint s Prettierom (formatiranje pri spremanju), s TypeScript parserom i Vue CLI v4.

Ove konfiguracije također bi trebale dobro funkcionirati s Vetur ekstenzijom za VS Code.

Kako konfigurirati ovu kombinaciju alata?

Napomena da ovo nije pitanje o dupliciranju. Postoje slična pitanja, ali ne s ovim točno određenim zahtjevima za Vue CLI4, TypeScript, ESLint, Airbnb, Prettier i rad zajedno s Vetur/VS Code.

UREĐIVANJE 2020/02 - Priroda ovog izazova nedavno se znatno promijenila, pa sam otvorio i sam odgovorio na drugo pitanje: Kako konfigurirati Vue CLI 4 s ESLint + Airbnb pravilima + TypeScript + Stylelint za SCSS, u VS Code editoru s automatskim ispravljanjem pri spremanju?

Odgovor #1

Prema jednom blogu koji sam pronašao [1], ovi koraci bi trebali osigurati da to funkcionira:

  1. Preuzmite ESLint i Prettier ekstenzije za VSCode.

  2. Instalirajte ESLint i Prettier biblioteke u naš projekt. U korijenskom direktoriju vašeg projekta, trebali biste pokrenuti:

npm install -D eslint prettier
  1. Instalirajte Airbnb konfiguraciju. Ako koristite npm 5+, možete pokrenuti ovaj prečac za instalaciju konfiguracije i svih njenih ovisnosti:
npx install-peerdeps --dev eslint-config-airbnb
  1. Instalirajte eslint-config-prettier (onemogućuje formatiranje za ESLint) i eslint-plugin-prettier (omogućuje ESLintu da prikazuje pogreške u formatiranju dok tipkamo)
npm install -D eslint-config-prettier eslint-plugin-prettier
  1. Kreirajte .eslintrc.json datoteku u glavnom direktoriju vašeg projekta:
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}
  1. Napravite .prettierrc datoteku u korijenskom direktoriju vašeg projekta. Ovo će biti mjesto gdje konfigurirate svoje postavke formatiranja. Dodao sam nekoliko vlastitih preferencija ispod, ali vas potičem da pročitate više o Prettier konfiguracijskoj datoteci
{
  "printWidth": 100,
  "singleQuote": true
}
  1. Posljednji korak je osigurati da Prettier formatira pri spremanju. Umetnite "editor.formatOnSave": true u svoje korisničke postavke u VSCode-u.

[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a

Povezani članci