I have solved this issue by fixing my setting.json file.
I just make editor.formateOnSave: true for individual language. Like this way
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
This works for me.
Another solution was running prettier command.
prettier --write \"src/**/*.ts\" \"test/**/*.ts\"
But for using this command according to my .prettierrc and .eslintrc file you have to ensure some packages as the dev dependency.
- prettier
- eslint
- @trivago/prettier-plugin-sort-imports
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-prettier
- eslint-plugin-simple-import-sort
Most of the packages come from the nest js boilerplate. If you have not found any package from the boilerplate then install by yourself.
Hopefully, this will be a great solution for those, who are facing this kind of problem like me. Have a good day!
Answer from Asif Jalil on Stack Overflowtypescript - Code formatting with prettier is not working in nest js - Stack Overflow
How to run prettier in browser to format code? e.g. inside ReactJs app - Stack Overflow
Prettier on JS, TS, JSX, TSX Help
Prettier removing camelCasing from css-in-js?
I've been wanting to use camelCase in my cssjs code too for some time.
I like react css convensions and I've used this for a while, and when I moved to jss (which is like emotion) I've used react conventions in my code as well using their library require('react/lib/CSSPropertyOperations');.
Hope it helps
More on reddit.comVideos
Recently joined a agency as an Contract React developer. I was assigned a task to edit some inline Scss code.
Being a Prettier user I formatted the code, made the necessary changes and submitted a pull request.
Next day the senior developer reviewed my code and asked me to stop using Prettier and assigned me a task to change back the Scss code manually to inline Scss.
When I asked why should I not use prettier to format code. He said it's bad and time consuming and other team members started telling me a story how one time prettier wasn't working and started throwing errors.
That's why they never use it.
I wanted to say that It was showing error because you were doing something wrong.
Just because you once had an bad experience doesn't mean it's bad.
Plus they use one big single Scss file for the whole project.
When I question it too and asked them to use separate files and how it can effect the performance.
One team member answered it doesn't matter, how they don't care about the performance and I should be open minded and learn from them. The boss has 18 years of experience.
What should I learn why not to follow good practices!
» npm install prettier
I have solved this issue by fixing my setting.json file.
I just make editor.formateOnSave: true for individual language. Like this way
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
This works for me.
Another solution was running prettier command.
prettier --write \"src/**/*.ts\" \"test/**/*.ts\"
But for using this command according to my .prettierrc and .eslintrc file you have to ensure some packages as the dev dependency.
- prettier
- eslint
- @trivago/prettier-plugin-sort-imports
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-prettier
- eslint-plugin-simple-import-sort
Most of the packages come from the nest js boilerplate. If you have not found any package from the boilerplate then install by yourself.
Hopefully, this will be a great solution for those, who are facing this kind of problem like me. Have a good day!
While I'm not sure why NestJS has the default setup the way they do (with an eslintrc.js file along with a prettierrc file, with any config you put in the prettierrc not having any impact/effect). I've found a work-around.
Prove problem (optional)
Before the steps to fix, 'prove' that the default NestJS provided prettierrc config-file is having no effect on your code by changing the default "trailingComma": "none" (the default is "all"). Now go to any of your src files and add a dangler to the last element in an object .. or create a example object and leave a trailing comma. Then format or format+save.. whatever.. Notice (at least for those of us experiencing this problem) that nothing changes and no warnings are issued from prettier.
Fix
- First: Rename your
prettierrctoprettierrc.js. - Next: Inside your
prettierrc.jsmodify the default json obj to an exported object, keeping our test-trailing-comma as "none" :module.exports = {"singleQuote": true, "trailingComma": "none"} - Next, inside the
eslintrc.jsleaving all of the other defaults alone, add an import(require) at the topconst prettierConfig = require('./.prettierrc.js') module.exports = { ... } - Then still in
eslintrc.jsin your rules section, add the following rule :rules: { 'prettier/prettier': [ 'error', prettierConfig ], ...}I'll attach a link to a screenshot if needed.. but you basically are importing and specifying insideeslintrc.jsthat you want to use the (now importable/requireable) prettierrc.js for formatting prettier rules (which you write out like you'd expect in the prettierrc.js file). You can now check your trailing commas for the lovely red-squigleys ;) eslintrc.js with prettierrc.js in vscode
» npm install prettier-format
