Sådan fnuges dine problemer væk i Sublime

Sublime er en letvægts teksteditor og er ret populær blandt mange webudviklere. Nu ved jeg, at der er mange sofistikerede IDE'er på markedet med intellisense, kodefuldførelse og hvad der ikke er. Men dette indlæg er for dem, der er forblevet loyale over for deres foretrukne tekstredaktører! Så hvis du bruger Sublime til dine projekter, så kan du nyde nogle af de smarte funktioner, det tilbyder. Linting er en af ​​dem.

Lad os starte med at definere udtrykket "Linting".

Linting er processen med at kontrollere din kode for potentielle fejl. Dette kan enten være syntaksen eller kodestilen.

Linting-processen kan udføres i tre udviklingsfaser:

  1. Via din editor (live linting)
  2. Gennem byggeprocessen
  3. Brug af en pre-commit-krog i versionskontrol

I dette indlæg vil vi udforske live fnug i redaktøren. Der er mange populære linters derude til JavaScript som JSHint, JSCS og ESLint. Jeg bruger ESLint, fordi ESLint understøtter ES6-kode, er meget udvidelig og er meget nem at bruge. Hvis du er interesseret, kan du se på sammenligningerne mellem de forskellige linters her!

Trin 1

Du skal først installere ESLint npm-pakken. Kommandoen er som følger:

npm install -g eslint

Muligheden '-g' er at installere pakken på det globale. Installer 'npm', hvis du ikke allerede har det installeret. En fil åbnes i Sublime, der beder dig om at downloade to andre plugins. Du skal installere disse plugins ved hjælp af Sublime's Package Control.

Åbn pakkekontrol ved hjælp af kommando / ctrl + shift + P, og vælg muligheden 'Pakkekontrol: Installer pakke'. Download derefter de to plugins.

  1. SublimeLinter-eslint
  2. SublimeLinter-contrib-eslint

SublimeLinter er rammen, der giver fnug. Det kommer ikke med støtte til forskellige sprog. Den sprogspecifikke Linter skal installeres separat.

Sublime-contrib-eslint-pluginet fungerer som en grænseflade mellem ESLint og SublimeLinter. Du kan kontrollere installationsproceduren på deres hovedwebsted, hvis du sidder fast hvor som helst.

Efter installation af plugins skal du nulstille din editor for at ændringerne skal træde i kraft. Nu ser vi ESLint i aktion!

Trin 2

Pis! Det var mange installationer. Nu, endelig, kan du tjekke det fantastiske ved Linting! Åbn din fil i sublim og se kraften ... men vent intet er sket. Hvorfor det? Vær ikke bekymret. Du har installeret alt korrekt, men ESLint i sig selv gør ikke noget. Du skal angive den grundlæggende konfiguration, og det er en meget ligetil proces. Sådan gør du:

  1. Tænd terminalprogrammet i projektmappens hjemmekatalog
  2. Skriv denne kommando
eslint --init

Der vises en prompt, der spørger dig et par spørgsmål om dine kodningsindstillinger, og der genereres en '.eslintrc' -fil til dig. Denne fil indeholder de regler, du lige har valgt. Du kan tilføje ekstra konfigurationer, hvis du vælger at gøre det.

Som du kan se, klager ESLint over fordybningen og det faktum, at foo-variablen ikke bruges nogen steder. Du kan kontrollere enhver fejl eller advarsel ved at svæve over den fremhævede del af koden eller kontrollere meddelelsen i Sublimes statuslinje i bunden.

Så det var det! Jeg håber, du var i stand til at følge med. Linting er et ret cool værktøj til at opdage fejl i din kode. Det sikrer, at du altid følger kodens retningslinjer og skriver ren kode. Jeg håber, at I alle fandt dette indlæg nyttigt og som altid glad kodning!