Linting và định dạng trong Visual Studio Code cho WordPress

Trước đây, tôi đã viết về việc thiết lập các tiêu chuẩn mã PHP của WordPress trong Visual Studio Code.

Bài viết này chỉ ra cách chúng ta có thể tiến thêm một bước và thiết lập JavaScript & CSS linting (phân tích mã cho các lỗi tiềm ẩn) và định dạng in / tự động đẹp cho PHP, CSS & JS.

Chúng tôi sẽ sử dụng Node, Composer, ESLint, Prettier, stylelint và EditorConfig và các cấu hình cho những thứ này do Christoph Herr tổng hợp lại.

Trọng tâm sẽ là VSCode nhưng quá trình này cũng sẽ hoạt động trong các trình soạn thảo khác như Atom.

Bước 1

Cài đặt

a) Nút

Hãy nghĩ về Node giống như repo plugin của WordPress, nhưng dành cho JavaScript.

Bằng cách cài đặt Node, về cơ bản chúng ta đang cài đặt Node CLI (Giao diện dòng lệnh) trên toàn cầu (toàn hệ thống).

b) Nhà soạn nhạc trên toàn cầu

Hãy nghĩ về Composer giống như repo plugin của WordPress, nhưng dành cho PHP.

Bước 2

Tải xuống tất cả các tệp từ repo Github này và sao chép chúng vào thư mục dự án của bạn (thư mục chủ đề hoạt động trong trường hợp của tôi).

  • .editorconfig: Tệp cấu hình tiêu chuẩn WordPress cho trình chỉnh sửa (sử dụng tab chứ không phải dấu cách, v.v.)
  • .eslintrc.js: Tệp cấu hình cho ESLint
  • .gitignore: Danh sách các mục nhập bị Git bỏ qua
  • .stylelintscssrc.js: Quy tắc tạo kiểu cho tệp Sass (không cần thiết nếu Sass không được sử dụng)
  • composer.json: Tệp cấu hình cho Nhà soạn nhạc
  • package.json: Tệp cấu hình cho Node
  • phpcs.xml.dist: Tệp cấu hình cho PHP_CodeSniffer
  • stylelint.config.js: Cấu hình cho stylelint

Bước 3

a) Yêu cầu Node cài đặt các gói được chỉ định trong package.json.

Trong cửa sổ đầu cuối bên trong gốc dự án của bạn, hãy chạy

npm install

Điều này sẽ thêm các gói sau vào dự án hiện tại:

  • eslint: lints mã JavaScript
  • eslint-config-wordpress: thêm các tiêu chuẩn JavaScript của WordPress
  • đẹp hơn: bản in đẹp (định dạng) JavaScript và với các plugin như đẹp hơn-stylelint, các ngôn ngữ khác
  • Prettier-eslint: chứa các quy tắc mà ESLint phải tuân theo để sửa mã được Prettier định dạng và chuyển.
  • Prettier-stylelint: cho phép Định dạng CSS đẹp hơn
  • stylelint: lints CSS
  • stylelint-config-wordpress: thêm các tiêu chuẩn CSS của WordPress
  • stylelint-order: sắp xếp các thuộc tính CSS

b) Yêu cầu Composer cài đặt các phần phụ thuộc được chỉ định trong composer.json:

composer install

Bước 4

Tiếp theo, hãy cài đặt các phần mở rộng VSCode này hoạt động như một cầu nối giữa trình chỉnh sửa và các tệp cấu hình của chúng tôi.

  • phpcs
  • phpcbf
  • Đẹp hơn
  • ESLint
  • stylelint
  • EditorConfig

Bước 5

Thêm phần sau vào tùy chọn người dùng VSCode của bạn:

"phpcs.standard": "WordPress-Core",
"phpcbf.standard": "WordPress-Core",
"phpcbf.executablePath": "./vendor/bin/phpcbf",
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false,
"editor.formatOnPaste": true,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true,
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"[css]": {
    "editor.formatOnSave": true,
},
"[php]": {
    "editor.detectIndentation": true,
    "editor.useTabStops": true,
    "editor.formatOnSave": false,
    "editor.insertSpaces": false,
},
"[javascript]": {
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.useTabStops": false
},
"[json]": {
    "editor.formatOnSave": false
},
"[xml]": {
    "editor.formatOnSave": false
}

Ghi chú:

  1. Để định dạng mã PHP, bạn có thể nhấp chuột phải vào tài liệu và Định dạng Tài liệu hoặc hiển thị bảng lệnh và chọn Định dạng Tài liệu.

  2. có:phpcs.xml.dist

<!-- Check all globals have the expected prefix. -->
<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
    <properties>
        <property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN"/>
    </properties>
</rule>

Bạn có thể muốn thêm tiền tố chức năng của mình vào phần trên để sửa các lỗi như sau:

<!-- Check all globals have the expected prefix. -->
<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
    <properties>
        <property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN, genesis_sample, custom"/>
    </properties>
</rule>

Ngoài ra, để sửa chữa - thêm

// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Valid use case.

bên cạnh dòng hoặc phía trên dòng có biến.

// Sets the content width based on the theme's design and stylesheet.
if ( ! isset( $content_width ) ) {
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Valid use case.
    $content_width = 702; // Pixels.
}

Tất nhiên, bạn có thể xóa bất kỳ quy tắc nào mà bạn thấy phiền phức hoặc không áp dụng được cho những gì bạn đang làm.

  1. Tải lại không gian làm việc của bạn (Cmd + Shift + P, Cửa sổ Tải lại) hoặc khởi động lại trình chỉnh sửa sau khi thực hiện bất kỳ thay đổi nào đối với tệp cấu hình.