He usado la extensión Prettier en el editor de código de Visual Studio durante mucho tiempo, pero recientemente estoy escribiendo en React with Typescript. Así que necesito configurar Prettier para formatear archivos .tsx.
Mi uso
La forma en que configuro esto es usar el archivo .eslintrc.json de .eslintrc.json . En primer lugar, en la matriz "extends" , agregué
"plugin:@typescript-eslint/recommended"y
"prettier/@typescript-eslint" Luego, configuré "parser" en "prettier/@typescript-eslint"
Finalmente, en la matriz de "plugins" agregué "@typescript-eslint" .
Deberá obtener un par de paquetes NPM (instalar con la opción -D ):
@typescript-eslint/eslint-plugin @typescript-eslint/parser Como referencia, todo mi archivo .eslintrc.json :
{ "env": { "browser": true, "es6": true, "jest": true }, "extends": [ "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "project": "./src/tsconfig.json", "ecmaVersion": 2018, "sourceType": "module" }, "plugins": ["react", "@typescript-eslint", "jest"], "rules": { "react/react-in-jsx-scope": "off" } }Espero que esto ayude.
Edite la configuración con lo siguiente en settings.json de VScode
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },Ampliando la respuesta de iNeelPatel , tuve que agregar dos líneas a la configuración de VSCode JSON:
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }Cree una carpeta .vscode en la raíz de su proyecto. En la carpeta .vscode , crea el archivo settings.json y en él escribe esta sección:
{ "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } No olvide agregar .vscode en el archivo .gitignore .
Esto le dará una solución perfecta
"Lo mismo me sucedió hace un momento. Configuré más bonito como formateador predeterminado en Configuración y comenzó a funcionar de nuevo. Mi formateador predeterminado era nulo".
https://github.com/microsoft/vscode/issues/108447#issuecomment-706642248
Una sencilla alternativa de interfaz de usuario a lo que ya se ha propuesto: