ESLint & Prettier - ის გამართვა Vue.js პროექტში

ზოგადად პროექტის სქოუფში, თიმში, ორგანიზაციაში კოდის დისციპლინის ჩამოყალიბებას უაღრესად დიდი მნიშვნელობა აქვს.

ყველა ადამიანი არის უნიკალური და აქვს საკუთარი შეხედულებები. ზოგს მოსწონს ყვითელი, ზოგს შეიძლება ვარდისფერი მოსწონდეს. შენ შეიძლება ცვლადის სახელები camelCase სტილით მოგწონს, ხოლო სხვას snake_case-ით მოსწონდეს.

რამდენადაც საინტერესო და უაღრესად მნიშვნელოვანია უნიკალური შეხედულებების ქონა, ზოგ შემთხვევაში იმდენადვე შეიძლება სირთულეები გამოიწვიოს.

მაგალითისთვის მე თუ გუნდში პროექტზე ვმუშაობ და ვწერ A სტილით კოდს და ჩემი კოლეგა წერს რადიკალურად განსხვავებული B სტილით - ეს უკვე არის პრობლემა და იწვევს როგორც ახლო მომავალში გართულებებს, ასევე გრძელვადიანი სახითაც.

ამას გარდა, სუფთა ხელებით კოდის სტილის შენარჩუნებას პროექტში უაღრესად დიდი ძალისხმევა სჭირდება. ამიტომაც შეიქმნა ისეთი თულები როგორიცაა ESLint, PHP CS Fixer, Prettier, Pylint და ა.შ.

ეს ხელსაწყოები უზრუნველყოფენ, რომ კოდის სტილი შენარჩულებული იყოს მთელს ქოუდბეისზე.

Vue.js-ისთვის რა ხელსაწყოები უნდა გამოვიყენოთ?

Vue.js პროექტში ყველაზე გამოყენებადი წყვილი კოდის სტანდარტის შენარჩუნებისთვის არის ESLint და Prettier

რა არის ESLint?

რა არის ლინტინგი? ლინტინგი არის კოდის სტატიკური ანალიზის ავტომატური პროცესი, რომელიც ეძებს პოტენციურ შეცდომებს. ძირითადად, ლინტერი აღმოაჩენს ისეთ შეცდომებს, როგორიცაა, გამორჩენილი მძიმე ან გამოუყენებლი ცვლადი და ა.შ ლინტერი ვერ გადაგვარჩენს ბიზნეს ლოგიკის შეცდომებისგან, მაგრამ ეცდება რო ჩვენი კოდი სინტაქსურად გამართული იყოს და საუკეთსო პრაქტიკებს მიყვებოდეს. ხელსაწყო, რომელიც ლინტერისა და ჯავასკრიპტის წყვილთან პირველად ახსენდებათ, არის ESLint.

რა არის Prettier?

ახლა კი ფორმატინგზე. რა განსხვავებაა ფორმატინგსა და ლინტინგს შორის? ლინტერი უფრო მეტად ფოკუსირებულია ერორების აღმოჩენაზე, მაშინ როცა ფორმატერი ზრუნავს შეინარჩუნოს ერთიანი სტანდარტი კოდში და დაიწვას გარკვეული წესები, როგორიცაა ტაბის სიგანე, ერთმაგი/ორმაგი ბრჭყალები და ა.შ.

ფორმატინგი როგორ ავამუშავოთ? სინამდვილეში თუ ჩვენს პროექტში eslint გვიყენია, ეს ნიშნავს რომ გარკვეული ფორმატინგი ჩვენ უკვე გვაქვს პროექტში. მიუხედავად ამისა, იმისთვის რომ სრულყოფილი ფორმატინგი გვქონდეს პროექტში, უნდა გამოვიყენოთ კიდევ ერთი ხელსაწყო, რომელიცაა prettier. Prettier კიდევ უფრო სრული და ძლიერი ფორმატინგის ხელსაწყოა, რომელიც მთლიანად ფორმატინგზეა ორიენტირებული და eslint-თან წყვილში ძალიან ძლიერი კომბოა თქვენი კოდის ერორებისგან დაცვის საქმეში.

ESLint & Prettier - ის კონფიგურაციის გამართვა

ქვემოთ განხილულია ორი ძირითადი შემთხვევა ამ თულების დამატების vue პროექტში, ორივე შემთხვევაში აუცილებელია დავაყენოთ შესაბამისი ექსთენშენები prettier and eslint.

პროექტის შექმნა Vite-ით

თუ პროექტს vite-ის დახმარებით ვქმნით eslint-სა და prettier-ის გამართვა ძალიან მარტივია, ამისათვის სრულიად საკმაირისია 2 შესაბამის კითხვაზე Yes პასუხის გაცემა.

ESLint-ისა და Prettier-ის ინტეგრაცია არსებულ პროექტში.

დავაინსტალიროთ prettier

npm install --save-dev --save-exact prettier tier

შევქმნათ კონფიგურაციის ფაილი

echo {} > .prettierrc.json

დავაინსტალიროთ eslint

npm install --save-dev eslint eslint-plugin-vue 
npm install --save-dev @rushstack/eslint-patch

შევქმნათ კონფიგურაციის ფაილი .eslintrc.js

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

შემდეგ კი აუცილებელია რომ eslint-ის ფორმატინგის წესები გამოვრთოთ, რადგან prettier-თან არ ქონდეს კონფლიქტი. It's quite simple. we need just one more package

npm install --save-dev eslint-config-prettier 

თუ გავუშვებთ ბრძანებას npm run lint უკვე ყველაფერი იმუშავებს

VScode-თან ინტეგრაცია

როგორც აღვნიშნეთ, შემდეგი ექსთენშებნების დაყენება

ასევე Vue 3-ისთვის საჭიროა Volar ის დაყენება. (კარგი იქნება და აქედანვე TypeScript ის ვერსიასაც დააყენებ)

Vue 2-ის და მხოლოდ და მხოლოდ Vu2 -ის შემთხვევაში უნდა დავაყენოთ ექსთენშენი Vetur და ასევე Code/ user/settings.json ში ჩავამატოთ შემეგი კოდი. "vetur.validation.template": false [!] იმისათვის რომ შეხვიდეთ Code/user/settings.json -ში გამოიყენე ctrl+shift+P და არიჩიე Preferences: Open user settings (JSON)

შემდგომ შევიდეთ ჩვენი იუზერის გლობალურ სეთინგებში. რისთვისაც უნდა გამოვიყენოთ ctrl + shift + p და ჩავწეროთ Open user settings (JSON) შემდეგ კი შევქმათ .vscode/settings.json ფაილი პროექტის რუთ დირექტორიაში და ჩავწეროთ შემდეგი წესები

და ჩავამატოთ ჩვენი კონფიგურაცია.

  
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,

ასევე რჩევა იქნება დაასინქრონიზიროთ თქვენი VsCode ის სეთინგები, რათა კომპიუტერის შეცვლისას ან ოპერაციული სისტემის გადაყენებისას თავიდან არ მოგიწიოთ extention-ების გადმოწერა და ასევე შეინარჩუნოთ კონფიგურაცია რომლებიც Code/user/settings.json-ში გაუწერეთ. სინქრონიზაციის პროცესი ძალიან მარტივია , შეგიძლიათ შემდეგი სქრინით იხელმძღვანელოთ

ESLint & Prettier PHPStorm-ში და WebStorm-ში

PHPStorm-სა და WebStorm-ს ESLint-ის პლაგინი სტანდარტულად მოყვება და Prettier-ის და ESLint-ის კონფიგურაციასაც აღიქვამენ.

ჩვენ უბრალოდ Shortcut უნდა გავუწეროთ ESLint-ის ფორმატინგს და შემდეგ შევძლებთ მარტივად დავაფორმატოთ ჩვენი კოდი

დეტალური ინსტრუქციები jetbrains-ისგან Eslint/Prettier