Οδηγός στυλ για Javascript

Οδηγός στυλ για Javascript

από τον Viktor Tomilin, Μηχανικός Λογισμικού στο Brain.

Στόχος μου είναι να βελτιώσω την ποιότητα του κώδικα σε όλα τα έργα στο Brain Agency. Ας μιλήσουμε λοιπόν για τη Javascript. Προς το παρόν, χρησιμοποιώ το εργαλείο ESlint για τον έλεγχο του στυλ κώδικα JS μου σε έργα. Είναι ένα πολύ ευέλικτο εργαλείο και μου αρέσει.

Το ESlint χρησιμοποιεί κανόνες για τον έλεγχο του κώδικα. Μπορείτε να δημιουργήσετε τη λίστα κανόνων σας ή μπορείτε να χρησιμοποιήσετε ένα σύνολο κανόνων από άλλους συγγραφείς. Μου αρέσουν οι κανόνες από το Airbnb και θα χρησιμοποιήσω αυτούς τους κανόνες τώρα για να δείξω για τι πράγμα μιλάω.

Το μέτριο όνειρό μου είναι όλοι οι προγραμματιστές να χρησιμοποιούν αυτούς τους κανόνες. σίγουρα θα κάνει τη ζωή μας πιο εύκολη.

Λοιπόν, γιατί επέλεξα τους κανόνες από την Airbnb;

Αυτή είναι μια μεγάλη ερώτηση. Η απάντηση είναι αρκετά απλή, επέλεξα αυτούς τους κανόνες επειδή η Airbnb χρησιμοποιεί τις ίδιες τεχνολογίες με εμάς.

Τι πρέπει να κάνετε για να αρχίσετε να χρησιμοποιείτε το ESlint.

Πρώτα απ 'όλα, πρέπει να εγκαταστήσετε το Node στον υπολογιστή σας. Μετά από αυτό, πρέπει να εγκαταστήσετε μονάδες npm με εργαλεία χνούδι.

npm install -g jshint
npm install -g eslint
npm install -g eslint-plugin-react
npm install -g eslint-plugin-jasmine
npm install -g eslint-config-airbnb

Στην εφαρμογή Rails δεν μου αρέσει να χρησιμοποιώ το package.json ούτε να εγκαθιστώ όλες τις λειτουργικές μονάδες τοπικά στο φάκελο της εφαρμογής. Έτσι, χρησιμοποιώ την καθολική λειτουργία για ενότητες με εργαλεία και πρόσθετα.

Εντάξει, τι έχουμε;

Το JSHint είναι ένα εργαλείο που βασίζεται στην κοινότητα που εντοπίζει σφάλματα και πιθανά προβλήματα στον κώδικα JavaScript και επιβάλλει τις συμβάσεις κωδικοποίησης της ομάδας σας. Είναι πολύ ευέλικτο, ώστε να μπορείτε εύκολα να το προσαρμόσετε στις συγκεκριμένες οδηγίες κωδικοποίησης και στο περιβάλλον στο οποίο περιμένετε να εκτελεστεί ο κώδικάς σας. Το JSHint είναι ανοιχτού κώδικα και θα παραμείνει πάντα έτσι (αυτά είναι καλά νέα).

Το ESLint είναι ένα βοηθητικό πρόγραμμα JavaScript linting ανοιχτού κώδικα. Το linting κώδικα είναι ένας τύπος στατικής ανάλυσης που χρησιμοποιείται συχνά για την εύρεση προβληματικών μοτίβων ή κώδικα που δεν συμμορφώνεται με ορισμένες οδηγίες στυλ. Υπάρχουν γραμμές κώδικα για τις περισσότερες γλώσσες προγραμματισμού και οι μεταγλωττιστές ενσωματώνουν μερικές φορές το linting στη διαδικασία μεταγλώττισης.

Το eslint-config-airbnb είναι η προεπιλεγμένη εξαγωγή και περιέχει όλους τους κανόνες ESLint της Airbnb, συμπεριλαμβανομένων των EcmaScript 6+ και React.

Το eslint-plugin-react είναι συγκεκριμένοι κανόνες του React για το ESLint.

Το eslint-plugin-jasmine είναι κανόνες ESLint για το Jasmine. Προσπαθώ να χρησιμοποιήσω το Jasmine για να δοκιμάσω τον κώδικα JS μου.

Τι γίνεται με τους συντάκτες;

Εάν χρησιμοποιείτε το πρόγραμμα επεξεργασίας Atom, μπορείτε να εγκαταστήσετε το πρόσθετο linter-eslint apm για την υποστήριξη του ESlint.

apm install linter-eslint

Μετά από αυτό, πρέπει να ορίσετε την παράμετρο διαμόρφωσης "Διαδρομή εγκατάστασης του παγκόσμιου κόμβου". Βρείτε τον Κόμβο στο σύστημά σας:

npm get prefix

Αντιγράψτε και επικολλήστε το αποτέλεσμα στο πεδίο στη σελίδα διαμόρφωσης linter στο πρόγραμμα επεξεργασίας.

Και μετά τελείωσες…

Sublime Text 3. Α, αλλά όχι τόσο γρήγορα… Πρέπει επίσης να εγκαταστήσετε το πρόσθετο SublimeLinter-eslint.

Στη συνέχεια, πρέπει να ανοίξετε το αρχείο: Προτιμήσεις → Ρυθμίσεις πακέτου → SublimeLinter → Ρυθμίσεις Χρήστη. Και ορίστε την προτίμηση διαδρομής ως εξής:

"paths": {
  "osx": [
    "<Full path for Node>/bin/eslint",
    "<Full path for Node>/bin/jshint",
    "<Full path for Node>/bin"
  ]
},

Πρέπει να γνωρίζετε πού είναι αποθηκευμένο το Node στο σύστημά σας. Εκτέλεση εντολής:

npm get prefix

Μόλις τελειώσετε με αυτό, αντιγράψτε και επικολλήστε το αποτέλεσμα στο αρχείο διαμόρφωσης.

Τώρα μπορείτε να αρχίσετε να χρησιμοποιείτε το πρόγραμμα επεξεργασίας :)

Τι γίνεται με το αρχείο ρυθμίσεων;

Θα σας δείξω το τρέχον αρχείο διαμόρφωσης ESlint. Είναι ένα πολύ μικρό αρχείο. Αυτό το αρχείο ονομάζεται .eslintrc.yml.

extends: airbnb
env:
 es6: false
plugins:
 — react
 — jasmine
rules:
 comma-dangle: 0
 no-param-reassign: 0
 object-shorthand: 0
 prefer-arrow-callback: 0 # Only for ES6
 no-var: 0 # Only for ES6
 func-names: 0 # I think, this rule not important
 react/react-in-jsx-scope: 0 # React is a global variable, so, I don’t need to use this rules
 react/prefer-es6-class: 0
 prefer-template: 0
 quote-props: 0
 dot-notation: 0
globals:
 afterEach: true
 beforeEach: true
 describe: true
 expect: true
 it: true

Ορίστε το! Η Airbnb έχει όλους τους βασικούς κανόνες, επανακαθόρισα μόνο μερικούς κανόνες για να ταιριάζουν στις συγκεκριμένες ανάγκες μας.

Παρακαλώ, χρησιμοποιήστε αυτόν τον οδηγό στυλ κώδικα… και κάντε το μέτριο όνειρό μου πραγματικότητα.

Ευχαριστώ και το τέλος.

Πείτε μου τη γνώμη σας για αυτό το άρθρο στην παρακάτω ενότητα σχολίων.