Eslint Là Gì

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.

Bạn đang xem: Eslint là gì

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

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

Ví dụ:

D:\vuialo.net\vuialo.net>npx eslint --init√ 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? · standard√ What format do you want your config file to be in? · JSONChecking peerDependencies of eslint-config-standard
latestThe config that you"ve selected requires the following dependencies:eslint-plugin-vue
latest eslint-config-standard
latest eslint
^7.12.1 eslint-plugin-import
^2.22.1 eslint-plugin-node
^11.1.0 eslint-plugin-promise
^4.2.1√ Would you like to install them now with npm? · No / YesInstalling eslint-plugin-vue
latest, eslint-config-standard
latest, eslint
^7.12.1, eslint-plugin-import
^2.22.1, eslint-plugin-node
^11.1.0, eslint-plugin-promise
^4.2.1+ eslint-plugin-node
11.1.0+ eslint-plugin-import
2.22.1+ eslint-plugin-promise
4.2.1+ eslint
7.14.0+ eslint-config-standard
16.0.2+ eslint-plugin-vue
7.1.0added 76 packages from 50 contributors, updated 1 package and audited 186 packages in 45.959sfound 0 vulnerabilitiesSuccessfully created .eslintrc.json file in D:\vuialo.net\vuialo.net 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 6 package sau:

"devDependencies": { "eslint": "^7.28.0", "eslint-config-standard": "^16.0.3", "eslint-plugin-import": "^2.23.4", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.1.0", "eslint-plugin-vue": "^7.10.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.

Xem thêm: Cách Sử Dụng After Effect Cs6, 50 Bài Hướng Dẫn After Effect Xuất Sắc

"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:

{ "": { "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "": { "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