Questions tagged [prettier]
Prettier is an opinionated code formatter for JavaScript, CSS, HTML, Markdown, and other languages. If possible, please use Prettier's Playground to illustrate your question (use the "Copy link" and "Copy markdown" buttons at the bottom right corner of the Playground).
prettier
1,692
questions
0
votes
0
answers
12
views
How To Unquote Numeric Properties In Vue
When assigning attributes to components in the template section of Vue, values of numeric props are placed inside quotes which tend to generate a lot of warning in the console. Even after removing ...
- 59
0
votes
0
answers
24
views
Error: prettier.resolveConfig is not a function (ESLint/Prettier Rule)
I'm encountering an error during linting in my React project:
Error: prettier.resolveConfig is not a function
Occurred while linting `path`
Rule: "prettier/prettier"
Those dependencies are ...
- 132
1
vote
0
answers
29
views
Is there any prettier rule for 'inserting spaces after opening and before closing parenthesis'?
I can achieve this in vscode by using:
{
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"typescript.format....
1
vote
0
answers
106
views
Update ESLint to flat config for Angular v18 app causes problems with prettier
I'm in the process of updating an Angular workspace with multiple applications from 17 to 18 and code and styling (in m2 mode) work. However, the ESLint configuration now uses the flat config and also ...
- 361
2
votes
2
answers
209
views
Prettier is removing typescript generic annotation from react class component
I'm trying to make an ErrorBoundary using a class component like this
class ErrorBoundary extends Component<ErrorBoundaryProps,ErrorBoundaryState>
But every time I format it with prettier, the ...
- 101
0
votes
0
answers
12
views
Prettier ignores tab width despite settings seem correct
I have this .prettierrc with "prettier": "^3.3.3" installed (package.json):
{
"printWidth": 100,
"useTabs": true,
"tabWidth": 2,
"...
- 4,939
-1
votes
0
answers
19
views
How to enable Prettier "Format On Save" behaviour in VSCode for one source code type only?
I want to enable the Prettier (code formatter) format on save feature, but for one type of source file only. (One programming language source.)
In this particular case, I only want this featured ...
- 15k
0
votes
0
answers
72
views
Prettier Plugins Not Found with Pre-Commit
I'm using Prettier with pre-commit to format my code before committing. However, I encountered an issue where Prettier doesn't seem to recognize the plugins.
With this setup, Prettier is not able to ...
- 2,747
0
votes
0
answers
48
views
Is there a way to prettify my shell script text on React
I am working on a React project and I am making a UI where it will show the shell script to the users and they can choose options from the dropdown.
Example of what user see on the UI:
!#/bin/bash
###...
- 83
1
vote
0
answers
57
views
Prettier in VSCode - Fails to format files
I get the follow error log while formatting the typescript file. I am using VSCode with formatting snippet extension.
I have checked the doc, but cannot find any solution.
["ERROR" - 12:32:...
0
votes
1
answer
12
views
Prettier setting to preserve space for prettier table formatting
I made a table
const transitions: any = [
/* fromState event toState callback */
t(States.zombie, Events.click, States.walk, ()=>animation("walk&...
- 1,945
0
votes
0
answers
30
views
creyD/prettier_action - Process completed with exit code 128
I am having trouble in properly setting up my GitHub prettier action. I plan on using the creyD/prettier_action GitHub action to format incoming commits, but every time the code gets reviewed it ...
0
votes
0
answers
31
views
ReactJS Prettier : Place Types On New Line
I am getting this error in VSCode ReactJS Typescript Prettier:
Prettier is suggesting increases readability when dealing with complex or long generic types by placing the generic type on a new line, ...
- 1,041
0
votes
0
answers
34
views
Adding CSS symbol code to Tailwind-css pseudo-elements
Not sure if this is a prettier or tailwind-css issue, but I am building a marquee component in nextjs where the content is separated by a bullet symbol with CSS code: content-['\2022'].
This renders ...
- 464
0
votes
2
answers
58
views
How to sort React attributes in VS Code?
For example I got:
<Image
alt=""
src="/img/logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
/>
Any plugin to sort ...
- 884
0
votes
0
answers
19
views
Vscode does not format the content of nextjs into multiple lines
vscode does not format the content of nextjs into multiple lines
I expected
<Image
alt=""
src="/img/logo.svg"
width="30"
height="30"
className="d-...
- 884
0
votes
1
answer
110
views
Why do I get an "Incorrect type" error when setting codeActionsOnSave?
I am following this doc by Wes Bos to set up both ESLint. I also wanted to make it such that the set up automatically helps me reformat my code on save. However, this part of the set up is not working....
0
votes
1
answer
30
views
Prettier included in package.json but not available in default formatter selection list
In an Angular project that I'm developing in Visual Studio Code, I have the following in package.json:
"devDependencies": {
"@angular-builders/custom-webpack": "^17.0.0&...
0
votes
1
answer
23
views
Prettier formatting remove the space after comma in SQL
I have this query:
SELECT
column1,column2,column3
FROM
table_stage
Then I set prettier to put the comma before the value but I get this result:
SELECT
column1
, column2
, column3
...
0
votes
1
answer
90
views
Trying to create a Github action that auto lints and formats the changed code in a PR
I have two Github actions one for auto formating and another for linting:
Auto lint
name: Lint changed files
on:
pull_request:
types: [opened, synchronize, reopened]
jobs:
auto_lint:
...
- 749
0
votes
0
answers
49
views
Prettier Ignoring .prettierignore for Nx Cache Directory After Upgrade to latest
I'm encountering an issue with Prettier after upgrading from version 3.2.5 to 3.3.0 in my Nx monorepo. Despite having a .prettierignore file configured to ignore certain directories, Prettier is now ...
0
votes
0
answers
26
views
gap within the brackets in css in VScode
It seems that Prettier is not removing gaps in my Brackets {} in CSS in VSCode latest Version.
I thought in the past it use to do it, not sure though. It formats in all other respects except removing ...
- 101
0
votes
1
answer
215
views
How to configure ESLint with Prettier and TypeScript on Node 20?
I tried to configure Prettier with ESLint and create a configuration in settings.json to fix errors when saving, but the errors appear in .js files and not in .ts files. How to configure this?
...
0
votes
1
answer
57
views
Prettier rule to break all html elements inside a block the same way
I am using default NextJS eslint rules and have prettier activated in VS Code.
I am pretty sure this is a prettier configuration but basically when I am templating, I want all HTML elements inside a ...
- 2,287
0
votes
0
answers
15
views
Enforcing Consistent Code Formatting for HTML and Typescript (VS Code & WebStorm)
I'm in a team working on Angular projects and using Prettier for code formatting (HTML, TypeScript, SCSS). We're encountering merge conflicts due to inconsistent Prettier formatting across team ...
- 113
0
votes
1
answer
149
views
VS Code: The Svelte server crashed 5 times. Cannot find module @rollup/rollup-win32-x64-msvc
Happens when saving and Prettier tries to format the code. Can anyone help me with this error? It's driving me insane.
Here's the error log:
Error: Cannot find module @rollup/rollup-win32-x64-msvc. ...
- 2,192
0
votes
0
answers
22
views
Prettier and eslint / tslint plugins turn off randomly
I have Intellij IDEA 2023.2.3, and I usually use prettier, eslint/tslint on automatic mode, and we have .eslintrc, .prettierrc.json, and tsconfig.json files in our root directory that intellij should ...
- 720
0
votes
1
answer
104
views
Prettier failing with "Request textDocument/rangeFormatting failed with message: js_source_text is not defined"
I'm using Prettier, along with the plugin prettier-plugin-apex in VS Code, to format Salesforce classes and Visual Force pages etc.
It works (formats my docs on Save) most of the time, but now some, ...
- 1,073
1
vote
1
answer
250
views
error message 'Delete `␍`eslintprettier/prettier' in nest js project
code prettier code
prettierrc
{
"singleQuote": true,
"trailingComma": "all"
}
eslintc.js
module.exports = {
parser: '@typescript-eslint/parser',
...
- 11
0
votes
1
answer
84
views
Visual Studio Code bad formatting in vuejs
I've reinstalled my Windows again and installed Visual Studio Code along with Prettier, but it's formatting the syntax and everything else very poorly. Below is an example of how it looks and how it ...
- 33
1
vote
0
answers
58
views
Does anybody know how to avoid this weird format in VS Code?
I made an HTML file and when I saved it, the formatting happens, but it adds those white spaces and line jumps for whatever reason.
I uninstalled VS Code and all the extensions that I had to have a ...
0
votes
0
answers
18
views
How can I configure prettier to stop turning ">" into "& gt;"?
My work situation does not allow the use of some characters such as ">", "<", or "&". Instead, we use the html entity equivalent in the JavaScript.
Prettier ...
0
votes
1
answer
186
views
Wrong @if @for intendation with newest Prettier with angular17 and VS Code
Using latest prettier with the following prettierrc file:
{
"arrowParens": "always",
"bracketSameLine": true,
"bracketSpacing": true,
"semi&...
- 108
1
vote
0
answers
124
views
How do I user Prettier on Laravel Blade?
Quick question, how do I use Prettier to prettify the PHP file with HTML source code in it?
So, here's my index.blade.php file
<!doctype html>
<html lang="en">
<head>
&...
- 11
0
votes
0
answers
28
views
How to ignore yml extension from prettier? .prettierignore doesn't work
I tried to create yml file to use github actions for flutter web deployment.
But I face error saying Invalid action input '...'.
Output terminal shows below error.
["INFO" - 오전 11:17:07] ...
- 1,196
1
vote
1
answer
96
views
Configure prettier to put curly brackets in a specific position
I'm using prettier on vscode to write C++ code and I'm trying to change how the curly brackets get positioned after a control flow statements:
What i get:
void Foo()
{
int i;
for(i = 0; i < ...
- 23
0
votes
0
answers
47
views
Unable to use Prettier as default formatter for React app in VSCode
I'm trying to install Prettier in my VScode (Windows+WSL) workspace. I succesfully installed extension and wrote this settings to my settings.json:
{
"[typescript]": {
"editor....
- 9
0
votes
1
answer
31
views
Prettier on WebStorm triggers multiple compilations
I'm developing (an Angular application) using WebStorm.
I like using Prettier and I have set it up to automatically trigger on save.
This seems to apply Prettier after the file has been saved, which ...
- 7,340
-1
votes
1
answer
52
views
Prettier reporting SyntaxError in JSX
Just spun up a new React project and decided to use Prettier in it. However, in all of my .tsx files Prettier reports syntax errors on the first line of JSX. For example:
src/components/layout/Layout....
- 2,155
1
vote
1
answer
297
views
Prettier formatting differs in VSCode and Neovim
This happens mostly due to ternary operators in javascript/typescript files. It looks something like this in Neovim:
intent={
invoiceNumberError === ""
? Intent.NONE
: ...
- 1,080
0
votes
0
answers
30
views
Prettier does not work in <script> tag in handlebars (hbs) file
My FE using handlebars (hbs) file and Prettier work pretty well except <script> tag of handlebars file
enter image description here
Has anyone encounted this issue?
0
votes
1
answer
83
views
Prettier is not formatting tsx code the way I want it to
Decided to reinstall windows and forgot to save my vscode and extension settings, now prettier won't work the way it used to.
<Modal visible={isModalVisible} animationType="slide" ...
user24055295
0
votes
0
answers
20
views
Prettier case-insensitive globbing
For some tooling, I'm attempting to run a Prettier command like prettier "**/*foo*" where files such as src/foo.js and src/another/Foo.js are both matched in a case-insensitive manner.
The ...
- 24.9k
0
votes
0
answers
48
views
How can I prettify/syntax-hilight xml in the browser using prettier?
I am looking at this example that describes how one can format graphql in the browser.
e.g.
<script src="https://unpkg.com/[email protected]/standalone.js"></script>
<script src=&...
- 10.5k
0
votes
0
answers
13
views
VSCode Prettier extension scrolls to bottom of file on save [duplicate]
Whenever I make a change to a file with Prettier enabled and save it, the cursor moves to the last position in the file. If I disable Prettier there are no issues.
Both VSCode and Prettier is up to ...
- 129
0
votes
1
answer
963
views
Flat config file with configs from legacy eslintrc compat error
I am trying to get prettier, typescript, eslint with airbnb typescript syntax working with linting and auto formatting.
The minimal node package.json file.
{
"name": "typescript-...
- 349
-2
votes
1
answer
77
views
Prettier formatting [closed]
When im formatting, it shows error
SyntaxError: Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/...
- 3
0
votes
0
answers
22
views
prettier formatWithCursor very slowed when use with *.min.js
I have an issue:
Use prettier to format the min.js file content, but the problem is that prefromance takes a lot of time if used:
prettier.formatWithCursor(contentFileMinJS, {
parser: "babel"...
- 1
0
votes
0
answers
50
views
How can i solve "loading error module" for Prettier?
I tried adding Prettier to a random project to get familiar with the setup but after I installed the plugin I can't seem to get past this error, and I searched for hours.
(photo) prettier error ...
0
votes
0
answers
21
views
New Line in prettier when more then one attribute and content
i want to add config to not break line when length is less than printWidth property.
First Case
input:
<div b={2} a={2} b={3} c={22}>s</div>
output:
<div b={2} a={2} b={3} c={22}>
...
