Блог

Согласно #5660, prettier поддерживает частные методы и свойства. Но когда я запускаю его в файле машинописного текста, который имеет частные методы и свойства, он жалуется, что это не так.

Команда:

 npx prettier "src/web-components/registerCustomElement.tsx"
 

.красивая.yml:

 trailingComma: es5
tabWidth: 4
semi: false
singleQuote: true
arrowParens: avoid
printWidth: 80
importOrder:
  - "^@"
  - "^(?!src|\.)"
  - "^. "
importOrderSeparation: true
overrides:
  - files:
    - "*.json"
    options:
      tabWidth: 2
 

src/веб-компоненты/registerCustomElement.tsx:

 import type { ComponentType } from 'react'
import ReactDOM from 'react-dom'

type Args = {
    name: string
    attributes: string[]
    component: ComponentType<unknown>
}

/**
 * Register a custom element which wraps a React component.
 *
 * @param name       - the name of the custom element
 * @param attributes - the names of the custom element's attributes
 * @param component  - the React component
 */
export default function registerCustomElement({ name, attributes, component: Component }: Args) {
    const webComponentClass = class extends HTMLElement {
        readonly #mountPoint: HTMLElement
        readonly #shadowRoot: ShadowRoot

        constructor() {
            super()
            this.#mountPoint = document.createElement('div')
            this.#shadowRoot = this.attachShadow({ mode: 'open' })
        }

        connectedCallback() {
            if (this.isConnected) {
                const attrs = attributes.reduce((acc, key) => Object.assign(acc, { [key]: this.getAttribute(key) }), {})

                this.#shadowRoot.appendChild(this.#mountPoint)
                ReactDOM.render(<Component {...attrs} />, this.#mountPoint)
            }
        }

        disconnectedCallback() {
            if (!this.isConnected) {
                this.#shadowRoot.removeChild(this.#mountPoint)
            }
        }
    }

    customElements.define(name, webComponentClass)
}
 

Результат:

 src/web-components/registerCustomElement.tsx[error] src/web-components/registerCustomElement.tsx: SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (19:17)