Sử dụng ESLint
ESLint giúp gợi nhắc code, nhắc nhở sửa code, giúp code của chúng ta vẫn và một chuẩn, trông đẹp rộng.
Bạn đang xem: Eslint là gì
Dùng ESLint để thống duy nhất style trong dự án có không ít member thuộc phát triển:
Indent bởi 4 space Indent Lúc break câu lệnh, thẻ là 4 space Có vết cách sau vết và trước lốt trường hợp viết trên một cái Mỗi file bé dại rộng 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 sản xuất vào một dự án công trình cụ thể:
npx eslint --init Nó đã hỏi một vài câu nlỗi dự án công trình chạy ở chỗ nào, cần sử dụng Vue xuất xắc React,... giúp sản xuất một file .eslintrc.json gồm những cấu hình căn bản lúc đầu, cũng tương tự mua thêm những gói cần thiết.
Quý Khách nên chọn extover cấu hình từ bỏ "standard" ngơi nghỉ package là eslint-config-standard. Package eslint-config-standard lại dựa vào những package:
eslint-plugin-promise eslint-plugin-import eslint-plugin-nodequý khách hàng cũng phải extkết thúc thông số kỹ thuật "plugin:vue/essential" sinh sống package eslint-plugin-vue.
Ví dụ:
D:vuialo.netvuialo.net>npx eslint --init√ How would you lượt thích 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 khổng lồ define a style for your project? · guide√ Which style guide vì you want to follow? · standard√ What format bởi you want your config tệp tin khổng lồ be in? · JSONChecking peerDependencies of eslint-config-standard
latestThe config that you"ve sầu selected requires the following dependencies:eslint-plugin-vue
lakiểm tra 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 lớn install them now with npm? · No / YesInstalling eslint-plugin-vue
lathử nghiệm, eslint-config-standard
lachạy thử, 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 và audited 186 packages in 45.959sfound 0 vulnerabilitiesSuccessfully created .eslintrc.json tệp tin in D:vuialo.netvuialo.net Cài đặt nkhô cứng (bước Checking peerDependencies of eslint-config-standard
lademo chạy hơi 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, bọn họ 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 tệp tin package.json:
"scripts": "lint": "eslint --fix --ext .js,.vue resources/js" Để đánh giá, 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 tệp tin là .eslintrc, định hình js, json, yml. Nên áp dụng định hình js vị rất có thể bình luận, sử dụng biểu thức.File .eslintrc.json gồm những thông số kỹ thuật sau:
envĐây là nơi cấu hình môi trường cơ mà code của họ vẫn chạy. Môi ngôi trường khác nhau thì sẽ sở hữu được hồ hết thay đổi toàn bộ khác nhau. lấy ví dụ, môi trường xung quanh browser thì sẽ sở hữu những biến đổi nhỏng window, document; môi trường xung quanh ES6 sẽ sở hữu một vài các loại dữ liệu mới như Set chẳng hạn.
"env": "browser": true, "es2021": true parserOptions Mặc định, ESLint soát sổ cú pháp của ES5. Nếu thực hiện ES6 hoặc những phiên phiên bản mới hơn, bọn họ đề nghị cấu hình bởi parserOptions. Cấu hình toàn bộ bỏ phần nàhệt như sau:
"parserOptions": "ecmaVersion": 12, "sourceType": "module" plugins Đây là phần nhiều plugin được áp dụng nhằm không ngừng mở rộng buổi giao lưu của ESLint. Ví dụ để cung ứng Vue template:
"plugins": < "vue"> globals Đây là nơi chúng ta đưa ra danh sách các trở nên global dùng trong dự án công trình. Nếu ko, Lúc bọn họ truy vấn vào một trong những biến hóa như thế nào kia, ESLint sẽ báo lỗi vì truy cập mang đến một trở nên chưa được có mang.
"globals": "Vue": "readonly", "Vuex": "readonly", "VueRouter": "readonly", "axios": "readonly", "Highcharts": "readonly", "$": "readonly", "ExcelJS": "readonly", "moment": "readonly" extends Đây là hầu hết config có sẵn được thực hiện, bọn họ đang không ngừng mở rộng bọn chúng bằng phương pháp cung ứng gần như config của riêng biệt mình.
Mặc định, tất cả những rule phần nhiều không được enable. Chúng ta extends từ bỏ các tập nguyên tắc được enable phổ cập để đỡ yêu cầu có mang những.
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 phần lớn nguyên tắc nhưng mà code cần được tuân theo. Có các rule đã làm được config sẵn khi chúng ta extends một thông số kỹ thuật như thế nào kia thì không nên config lại nữa. Ở đây, chúng ta chỉ cần config thêm đông đảo rule mà chúng ta cần tuỳ chỉnh nhưng thôi.
Rule tại chỗ này rất có thể là rule vì ESLint cung ứng sẵn hoặc rule của plugin.
Mỗi rule rất cần được config nhị thông số: cực hiếm ứng với mức độ áp dụng rules (off, warn, error hoặc 0, 1, 2 đến ngắn gọn) với các tuỳ chọn.
lấy ví dụ, rule sau yên cầu vận dụng vết nháy solo (single quote) " cho những xâu trong code:
"rules": "quotes": <"error", "single"> Lượng rule cơ mà ESLint tư vấn là không nhỏ, gần như là toàn thể những nguyên tố của code hầu như được support cả, chưa tính plugin còn không ngừng mở rộng không dừng lại ở đó.
Ví dụ
Sau đây là cục bộ cấu hình của ESLint mà lại tôi áp dụng vào dự án công trình 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 vết ko kiểm tra file
Để không soát sổ một tệp tin nào kia, thêm chiếc sau vào đầu của file:/* eslint-disable */
Danh sách luật
List of available rules - ESLintKhông phép tắc như thế nào được enable mang định. Cấu hình "extends": "eslint:recommended" trong tệp tin cấu hình đang enable những hiện tượng chung chung nhưng được khắc ghi ibé check.
Tùy chọn --fix trong câu lệnh đang tự động fix các lỗi đơn giản và dễ dàng cơ mà được ghi lại ibé là loại cờ lê.
Escape vệt bí quyết trong đường dẫn trên Windows
Lúc thực hiện lệnh eslint trên phố dẫn mà lại có lốt biện pháp trên hệ quản lý điều hành Windows rất có thể bị lỗi No files matching the pattern. lấy một ví dụ đánh lệnh sau vẫn lỗi:
npx eslint --fix "posts/ui - carousel" Chúng ta đề nghị escape nhỏng sau:
npx eslint --fix "posts/ui - carousel"
Tự đụng fix vào VSCode
Cài extension đến VSCode:ESLint - Visual Studio Marketplace
Quý khách hàng rất có thể sử dụng lệnh trong VSCode nhằm fix các bug rất có thể auto của file bây chừ.
Dường như, thêm file .vscode/settings.json nlỗi sau nhằm tự động hóa format, lint Lúc lưu giữ file:
"Tsay mê khảo
Hãy thực hiện ESLint cho dự án của bạn! - Viblo
