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).
1,518
questions
-1
votes
0
answers
5
views
Formatter not formating on save in VSC
When I save (ctrl+s) the changes on file, normaly Prettier its shot on save, to format the code. But now I get this error, it starts 'loading something', and after a while doesn't make effect.
When I ...
0
votes
0
answers
14
views
Inconsistency with Prettier on local vs prod on the same Browser
Problem: There seems to be a mismatch in how the prettier parser performs in my local environment vs Production environment when I host my React application. The issue is particularly for the "in&...
0
votes
0
answers
13
views
Prettier throwing unexpected errors when folders/files are specified in the .prettierignore file
My goal is very simple, ignore some folders and files. Upon searching, I saw that Prettier supports .prettierignore file and you can specify the folders and files you want ignored. (see Ignoring Files:...
0
votes
0
answers
7
views
Prettier (Extension) inserts {" "} when formatting document
I have been using Prettier extension for some time with Angular projects and decided to give it a try for one of my React projects.
However what I have noticed, upon formatting my .tsx files it ...
0
votes
0
answers
8
views
VS Code Prettier On-Save not replacing whitespace with {" "}
I recently did a clean install with vs code. My previous install still had prettier extension as opposed to the now built-in prettier formatter. When I loaded my project, I noticed on-save is not ...
0
votes
1
answer
16
views
Error warning in settings for visual studio code
I've created a basic html page using visual studio code and when I've tried to do certain things like format the document using the prettier extension I get a error message to edit the settings. It ...
1
vote
0
answers
20
views
Prettier not working on VS Code (only from Command Palette)
I'm using VS Code on Windows 11, and I have installed Prettier. However, it only works from the terminal.
If I execute npx Prettier --write dom.html in the terminal, it works fine.
If I go to the ...
0
votes
1
answer
35
views
Nextjs website not applying tailwindcss property
I am making a Nextjs React website. When I serve the react app and go to the localhost, the tailwindcss works fine. However, when I go to the website hosted by vercel, it does not work and the ...
0
votes
1
answer
18
views
Vetur + Prettier HTML formatter
I'm using Quasar with Vue3 and the vs code extension Vetur and Prettier to help me keep the code well formatted.
I see something I don't really like and I would like to fix it in the configuration, ...
-2
votes
0
answers
26
views
Why is VSCode's Prettier Extension not working for Python?
Prettier won't format my python files. Help me what to do!
help me with this. I am using prettier and tried it. It worked well with javascript.
0
votes
1
answer
26
views
How to configure indent tabs on prettier git action?
I've added a git action to prettify my code.
The problem is that when it prettify, it makes 2 tabs indenation and I cant find where to config it to be 4 tabs (or any other prettier configuration).
How ...
0
votes
1
answer
23
views
Issue with eslint/ eslint-config-airbnb
I'm getting this error when I try to run my linter that extends the airbnb linter (es-config-airbnb). I don't have an import/no-cycle rule here, so I'm not sure what the problem is:
Error: .eslintrc....
0
votes
1
answer
25
views
Is there any way to change how prettier formats React code?
I'm trying to learn React and I'm using Prettier as my code formatter. I keep running into the problem where Prettier formats my code in a very unreadable way. For example:
import ExpenseItem from './...
0
votes
0
answers
30
views
Prettier won't auto-fix longer Tailwind CSS class name stack according to print width
Isn't Prettier supposed to auto-fix longer Tailwind CSS class name stack according to print width?
Next.js Project: Github, package.json, .eslintrc.js, .prettierrc.js, example line
Visual Studio Code:...
0
votes
1
answer
24
views
eslint not identifying prettier issues in jsx files
Following a tutorial on youtube, I have integrated eslint and prettier to my reactjs project. I have then defined a lint command in my package.json file.
.eslintrc.json
{
"env": {
&...
0
votes
0
answers
32
views
'react-hooks/rules-of-hooks' and 'react-hooks/exhaustive-deps' not working
I am trying to setup eslint that can provide me errors and warning in expo react native project.
I added these rules but it seems like they are not working.
This is how my .eslintrc.js looks like
...
1
vote
2
answers
44
views
prettier command not working even though prettier is in devDependancies
In my package.json
"devDependencies": {
...
"prettier": "^2.8.4",
...
}
I run npm i.
Then:
$ prettier
bash: prettier: command not found
$ npx prettier -v
/...
1
vote
0
answers
19
views
space-in-parens in .prettierrc
I want to have the prettier like space-in-parens from eslint.
From:
function foo(one, two, three){
To:
function foo( one, two, three ){
I found this thread (https://github.com/prettier/prettier/...
0
votes
0
answers
9
views
Trying to migrate from tslint to eslint in angular@13. Getting lots of dependency errors
enter image description here
I've tried to run "npm i" after cleaning the cache. but not working. Is there anything i'm missing?
Do i need to update the version of the @angular/cdk or flex-...
0
votes
1
answer
39
views
Prettier indentation is conflicting... with itself?
So I have the infamous VS Code + Prettier + ESLint setup and it mostly works as expected. There are no conflicting rules when prettier formats on save. Running eslint --fix also works fine, without ...
0
votes
1
answer
19
views
VS Code error with Prettier: "Invalid prettier configuration file detected... Cannot find module 'basedir=$(dirname..."
I only get this error when I run VS Code 'as Administrator'. It isn't a problem when I run it normally, but I need to be 'as Administrator' to perform my tasks.
I'm currently getting errors any time I ...
0
votes
0
answers
33
views
Prettier using wrong path for .prettierignore file
My file structure is as follows:
project/
client/
.prettierrc
.prettierignore
The formatting output in VS Code looks something like this:
["INFO" - 4:31:44 PM] ...
1
vote
0
answers
43
views
How to stop prettier from formatting strings?
Is there any way to stop prettier from formatting my strings in backticks ?
I have already added "printWidth": 1000 to .prettierrc file.
but it will apply this setting to all of my files and ...
-1
votes
0
answers
7
views
How to wrong format by Prettier?
Prettier format gives me this format for these kind of functions, I may did something wrong with the settings, can anyone help me to catch it and return it to the default setting.
I don't like this ...
0
votes
0
answers
21
views
Prettier formatter removes spacing in code
I am using the prettier code formatter to format my typescript code and I can't for the life of me figure out how to have it allow spacing within the code. Example
how I like it:
groups: [
{
...
0
votes
0
answers
10
views
Different Prettier rules for viewing and saving files in VSCode
Is there a way to have differing prettier rules for when I'm looking and editing a file versus when it's saved and/or committed?
Specifically, I don't like the visual style that we have set in our ....
0
votes
0
answers
24
views
VSCode/eslint/prettier does not auto-format _app.tsx file on save
I have a fairly extensive eslint/prettier config. Normally it works great, but today I noticed that for some reason my _app.tsx file does not auto-format the same as other pages. In this case, it's ...
1
vote
0
answers
26
views
Prettier overrides ESLint options
in my .vscode/settings.json file I have:
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"...
0
votes
2
answers
116
views
prettier-tailwind-plugin isn't working as expected when I hit save in VSCode
I installed the prettier-plugin-tailwindcss and it successfully sorts the Tailwind classes when I run Prettier using npx prettier --write index.html. However, when I hit save in VScode, the prettier-...
1
vote
1
answer
24
views
Glob pattern for different file types in different directories
I want to configure my IDE (PhpStorm) to run Prettier on save, for different file types in different directories, but it only accepts one glob pattern.
I want one pattern that will do the work of both ...
0
votes
0
answers
16
views
How to uningore directories in .prettierignore
I need to make prettier format code only in one directory, omitting the rest. I set up my ./.prettierignore like this:
/*
!/some/dir/
but everything in /some/dir/ is ignored too when i run prettier --...
-2
votes
0
answers
36
views
How to configure Prettier to only reorder Tailwind classes
Tailwind CSS features a Prettier plugin which reorders the Tailwind classes in HTML files.
However, Prettier also applies all other rules to the files such as max line width or whitespace between HTML ...
0
votes
1
answer
32
views
ESLint + Prettier adds parentheses wrong on Angular pipe
So, we have an Angular project running on version 8.2.14, and we recently introduced Prettier and ESLint as an autoformatter to keep everything to a standard.
However, Prettier formats the parentheses ...
0
votes
0
answers
24
views
Prettier Typescript configuration for keeping the object in one line but its type definition in separate lines
I have code with functions of this format:
export const loginService = async ({ email, password }: { email: string; password: string }) => {}
I want all these functions to be formatted in this ...
1
vote
0
answers
102
views
ESLint: 8.35.0 Error: "prettier/react" has been merged into "prettier" in eslint-config-prettier 8.0.0
Oops! Something went wrong! :(
ESLint: 8.35.0
Error: Cannot read config file: /home/jenkins/workspace/ Error: "prettier/react" has been merged into "prettier" in eslint-config-...
0
votes
1
answer
60
views
Prettier not working on save from within Visual Studio Code
It appears the formatting via keyboard and formatting from the menu are not on the same page, but I don't know why. Below are my exact detailed steps...
From Visual Studio Code 1.75.1
I installed the ...
-1
votes
0
answers
13
views
how to disable line break with prettier when using Emotion
before prettier:
<div css={css`display: flex; justify-content: space-between;`}>
</div>
after prettier:
<div
css={css`
display: flex;
justify-content: space-between;...
0
votes
0
answers
11
views
What formatting tool can I use to make my Tailwindcss classes align horizontally?
Does anyone have any formatting tool to go from this to this?
Prettier doesn't work, I've tried the prettier-tailwindcss plugin too, it doesn't work too.
How can I change from this:
<div
...
0
votes
1
answer
23
views
How to configure vs code prettier extension
I have configured the HTML prettier.printWidth": 200, but its still breaking the buttons like below
<div classNameName="col-lg-12 text-center my-3 btn-group-div" style={{ textAlign: &...
0
votes
0
answers
119
views
VS Code ESLint No Quick Fixes Available on Svelte files only
For some reason, when I hover over an ESLint issue on a Svelte file, it'll state that it knows there's an issue, but that there's no quick fixes available.
However, if I go to a TypeScript file, I ...
-1
votes
2
answers
82
views
eslint prettier: commas on objects?
I seem to have a problem with ESlint & Prettier in Vscode. As far as I can tell everything is configured correctly, where <;> will be added on save, but not <,> for objects.
Eslint ...
0
votes
1
answer
77
views
Prettier force white space before and after every balise in HTML
I work on a project using Prettier, the project use Nuxt(Vuejs framework).
I see a really weird behaviour about Prettier and the HTML rendered.
If i have a balise (h1,h2,div...) like this:
<h2>...
0
votes
0
answers
113
views
prettier throws error `Failed to resolve a parser`
Prettier throws error "failed to resolve a parser". Prettier is selected in Workspace, User and Python > Workspace, so I'm out of ideas why the error is thrown...
["INFO" - 08:...
-2
votes
0
answers
8
views
Prettier configuration messes up my code?
Prettier changes the style of my code in a bad way
After saving with prettier:
Before saving:
I dont know how to solve it.
1
vote
1
answer
33
views
python subprocess.run("npx prettier --write test.ts", shell=True) does not work but running "npx prettier --write test.ts" in terminal does not
My file structure:
test.py
test.ts
and I am attempting to format the TypeScript file using a Python script. (Running this on Command prompt in Windows) However, when I run
my python file with ...
1
vote
1
answer
34
views
Unable to get prettier to format nicely
I am having some difficulity with prettier. I use a husky pre-commit to format files, which runs prettier --write \"./**/*.{js,jsx,json,ts,tsx}\"
This works as in prettier is ran, but it is ...
0
votes
0
answers
68
views
How do I fix the first line to the top of the screen when vscode's saving?
enter image description here
I'm using vscode prettier, and at some point when I save the code, the end line goes up to the top of the screen. If you scroll down, the first line isn't gone, it's still ...
0
votes
1
answer
31
views
Svelte: The formatter auto closes tags which are empty "<div/>"
I have installed Svelte for VScode and Prettier extension for my project. This issue appeared randomly after a week and only happens with .svelte files. On save, it formats empty <div></div&...
0
votes
0
answers
33
views
Disabling prettier in ESLint in VSCode
When I try to use the Microsoft ESLint extension in VSCode it complains about pretty much every line in my JS file being incompatible with Prettier. I thought Prettier was a separate extension and I ...
-2
votes
0
answers
31
views
How can i deal with prettier behavior?
Prettier is messing my arrays so when i have a long array and i click save, prettier format it to a lot of lines so every item toke one line. i'll add some pictures to see the problem..
I want to have ...