Cấu hình ESLint của Prettier + Airbnb

Question

Gần đây, tôi đã bắt đầu sử dụng Visual Studio Code cho trình soạn thảo của tôi và tìm thấy trình định dạng Prettier - JavaScript. Tôi nghĩ rằng đó là một plugin tuyệt vời vì nó giúp tôi giữ cho mã của tôi trông đẹp mắt.

Tôi thiết lập cấu hình ESLint của Airbnb và nhận thấy rằng nó cực kỳ hữu ích.

Đây là thông tin bắt giữ. Cấu hình Airbnb ESLint mà tôi hiện đang chạy không hoạt động tốt với Prettier. Ví dụ, đối với chuỗi JavaScript, Prettier được định dạng để bao gồm các dấu tick đôi và ESLint của Airbnb giống như bọ ve đơn. Khi tôi định dạng mã bằng Prettier, thì ESLint của Airbnb không đồng ý.

Tôi biết Kent Dodds đã làm một số công việc với configs ESLint, trong số những người khác, example here.

Nhưng tôi dường như không thể tìm một giải pháp cho phép tôi sử dụng sự kỳ diệu của đẹp hơn để định dạng mã của tôi để ESLint Airbnb của.

Answer 1

Vì vậy, bạn có tập tin .eslintrc của bạn, với tài sản "extends": "airbnb" Thêm một bất động sản, quy tắc và các quy tắc mà bạn sẽ viết trong đó sẽ ghi đè lên những người được thừa kế từ Airbnb

"extends": "airbnb", 
"rules": { 
    "eqeqeq": 2, 
    "comma-dangle": 1, 
} 

Bây giờ đây tôi chỉ cần ghi đè hai quy tắc ngẫu nhiên, bạn sẽ cần phải tìm một quy tắc bạn cần :)

Hoặc tôi đã hiểu nhầm câu hỏi của bạn?

Answer 2

Tôi nghĩ eslint-config-prettier đã được tạo ra chỉ dành riêng cho mục đích này: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

Về cơ bản nó turns off tất cả các quy tắc mà phải làm với phong cách mã bởi vì prettier sẽ chăm sóc nó anyway.

Vì vậy, bạn chỉ cần cài đặt plugin này cùng với bất kỳ plugin eslint mong muốn khác (như eslint-config-airbnb) và trong cấu hình eslint của bạn, bạn chỉ cần thêm nó vào trường extends. Ví dụ:

{ 
    "extends": ["airbnb", "prettier"] 
} 

Answer 3

Dưới đây là một số cách để thực hiện, theo đề xuất. Tôi thích cách tiếp cận đầu tiên vì bạn sẽ không bao giờ phải bận tâm với các quy tắc khác có thể xung đột trong tương lai.

i) Cài đặt eslint-config-prettier và mở rộng từ nó trong .eslintrc. Việc làm này sẽ tắt một số các quy tắc định dạng liên quan đến trong ESLint mà có thể xung đột với đẹp:

{ 
    "extends": [ 
    "airbnb", 
    "prettier" 
    ] 
} 

ii) Thêm "singleQuote": true đến tập tin .prettierrc config:

{ 
    "singleQuote": true, 
    ... 
} 

iii) Thêm một dòng --single-quote lệnh tùy chọn khi bạn gọi Prettier:

$ prettier --single-quote ... 

iv) Tắt quy tắc quotes của ESLint trong sốcủa bạntệp cấu hình (và những người có khả năng khác có thể xung đột):

{ 
    "rules": { 
    "quotes": "off", 
    ... 
    } 
}