Sử dụng ESLint

Posted on by mtoplistChuyên mục:Top List

Sử dụng ESLint

ESLint giúp gợi ý code, gợi ý sửa code, giúp code của chúng ta sẽ cùng
một chuẩn, nhìn đẹp hơn.

Dùng ESLint để thống nhất style trong dự án có nhiều thành viên cùng
phát triển:

  • Indent bằng 4 space
  • Indent khi break câu lệnh, thẻ là 4 space
  • Có dấu cách sau dấu { và trước dấu } nếu
    viết trên một dòng
  • Mỗi file nhỏ hơn 500 dòng
  • …

Cài đặt

Khởi tạo dự án mới:

npm init -y

Cài Node package:

npm install --save-dev eslint

Khởi tạo trong một dự án cụ thể:

npx eslint --init

Nó sẽ hỏi một số câu như dự án chạy ở đâu, dùng Vue hay React,… giúp
tạo một file .eslintrc.json có các cấu hình căn bản ban
đầu, cũng như cài thêm các gói cần thiết.

Bạn nên chọn extend cấu hình từ “standard” ở package là eslint-config-standard.
Package eslint-config-standard lại phụ thuộc các package:

  • eslint-plugin-promise
  • eslint-plugin-import
  • eslint-plugin-node

Package eslint-config-standard không hỗ trợ eslint version 8. Chuyển
sang sử dụng package eslint-config-google.

Bạn cũng nên extend cấu hình “plugin:vue/essential” ở package eslint-plugin-vue.

Ví dụ:

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · google
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-google@latest eslint@>=5.16.0
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, eslint-config-google@latest, eslint@>=5.16.0

added 7 packages, and audited 90 packages in 2s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.json file in <path>

Cài đặt nhanh (bước Checking peerDependencies of
eslint-config-standard@latest chạy khá là lâu):

npm install --save-dev eslint eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-vue

Về bản chất, chúng ta cần 3 package sau:

"devDependencies": {
    "eslint": "^8.13.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-vue": "^8.6.0"
}

Thêm script vào file package.json:

"scripts": {
    "lint": "eslint --fix --ext .js,.vue resources/js"
}

Để kiểm tra, chúng ta có thể chạy lệnh sau:

npm run lint

Hoặc:

npx eslint --ext .js,.vue resources/js

Cấu hình

Tên file là .eslintrc, định dạng js, json,
yml. Nên sử dụng định dạng js vì có thể
comment, sử dụng biểu thức.

File .eslintrc.json có các cấu hình sau:

env

Đây là nơi cấu hình môi trường mà code của chúng ta sẽ chạy. Môi trường
khác nhau thì sẽ có những biến toàn cục khác nhau. Ví dụ, môi trường
browser thì sẽ có các biến như window, document;
môi trường ES6 sẽ có một số loại dữ liệu mới như Set chẳng hạn.

"env": {
    "browser": true,
    "es2021": true
}

parserOptions

Mặc định, ESLint kiểm tra cú pháp của ES5. Nếu sử dụng ES6 hoặc các
phiên bản mới hơn, chúng ta phải cấu hình bằng parserOptions.
Cấu hình toàn bộ cho phần này như sau:

"parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
}

plugins

Đây là những plugin được sử dụng để mở rộng hoạt động của ESLint. Ví dụ
để hỗ trợ Vue template:

"plugins": [
    "vue"
]

globals

Đây là nơi chúng ta đưa ra danh sách các biến global dùng trong dự án.
Nếu không, khi chúng ta truy cập vào một biến nào đó, ESLint sẽ báo lỗi
vì truy cập đến một biến chưa được định nghĩa.

"globals": {
    "Vue": "readonly",
    "Vuex": "readonly",
    "VueRouter": "readonly",
    "axios": "readonly",
    "Highcharts": "readonly",
    "$": "readonly",
    "ExcelJS": "readonly",
    "moment": "readonly"
}

extends

Đây là những config có sẵn được sử dụng, chúng ta sẽ mở rộng chúng bằng
cách thêm vào những config của riêng mình.

Mặc định, tất cả các rule đều không được enable. Chúng ta extends từ
các tập luật được enable phổ biến để đỡ phải định nghĩa nhiều.

"extends": [
    "plugin:vue/essential",
    "standard"
]

rules

Đây là chính là phần config những quy tắc mà code cần phải tuân theo.
Có nhiều rule đã được config sẵn khi chúng ta extends một cấu hình nào
đó thì không cần config lại nữa. Ở đây, chúng ta chỉ cần config thêm
những rule mà chúng ta cần tuỳ chỉnh mà thôi.

Rule ở đây có thể là rule do ESLint cung cấp sẵn hoặc rule của plugin.

Mỗi rule cần được config hai thông số: giá trị ứng với mức độ áp dụng
rules (off, warn, error hoặc 0,
1, 2 cho ngắn gọn) và các tuỳ chọn.

Ví dụ, rule sau yêu cầu áp dụng dấu nháy đơn (single quote) '
cho các xâu trong code:

"rules": {
    "quotes": ["error", "single"]
}

Lượng rule mà ESLint support là rất lớn, gần như toàn bộ các yếu tố của
code đều được support cả, chưa kể plugin còn mở rộng hơn nữa.

Ví dụ

Sau đây là toàn bộ cấu hình của ESLint mà tôi sử dụng trong dự án Vue.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],

    "globals": {
        "Vue": "readonly",
        "Vuex": "readonly",
        "VueRouter": "readonly",
        "axios": "readonly",
        "Highcharts": "readonly",
        "$": "readonly",
        "ExcelJS": "readonly",
        "moment": "readonly",

        "CV": "readonly",
        "noti": "readonly",
        "Pagi": "readonly",

        "SSO_CONSUMER_DOMAIN": "readonly",
        "SSO_PASSPORT_URL": "readonly",
    },

    "extends": [
        "plugin:vue/essential",
        "standard"
    ],
    "rules": {
        "semi": ["error", "always"],
        "indent": ["error", 4],
        "space-before-function-paren": ["error", {
            "anonymous": "always",
            "named": "never",
            "asyncArrow": "always"
        }],
        "eqeqeq": "off",
        "no-new": "off",
        "no-multiple-empty-lines": "off",
        "operator-linebreak": ["error", "before"],
        "vue/require-v-for-key": "off",
        "vue/require-valid-default-prop": "off"
    }
}

Đánh dấu không kiểm tra file

Để không kiểm tra một file nào đó, thêm dòng sau vào đầu của file:

/* eslint-disable */

Danh sách luật

List of
available rules – ESLint

Không luật nào được enable mặc định. Cấu hình "extends":
"eslint:recommended" trong file cấu hình sẽ enable các luật
chung chung mà được đánh dấu icon check.

Tùy chọn --fix trong câu lệnh sẽ tự động fix các lỗi đơn
giản mà được đánh dấu icon là cái cờ lê.

Escape dấu cách trong đường dẫn trên Windows

Khi thực hiện lệnh eslint trên đường dẫn mà có dấu cách trên hệ điều
hành Windows có thể bị lỗi No files matching the pattern.
Ví dụ đánh lệnh sau sẽ lỗi:

npx eslint --fix "posts/ui - carousel"

Chúng ta cần escape như sau:

npx eslint --fix \"posts/ui - carousel\"

Tự động fix trong VSCode

Cài extension cho VSCode:

ESLint – Visual Studio Marketplace

Bạn có thể sử dụng lệnh trong VSCode để fix các bug có thể tự động của
file hiện tại.

Ngoài ra, thêm file .vscode/settings.json như sau để tự
động format, lint khi lưu file:

{
    "[javascript]": {
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        }
    },
    "[typescript]": {
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.organizeImports": false
        }
    }
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force"
        }
    },
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.options.tabSize": 4
}

Tham khảo

Hãy sử dụng ESLint cho dự án của bạn! – Viblo

Getting
Started with ESLint – ESLint

Configuring
ESLint – ESLint

Command
Line Interface – ESLint

mtoplist