Develop Reference

Why my prettier doesn't work in react project on save?

Expected result:
Applied prettier - code formatter in my react project on save.
For example, I hope the semicolon can be automatically added when I save the file.
add semicolon automatically when save
My Problem:
Based on Vscode Output, It seems that prettier has been applied already.
However, the semicolon were not added automatically.
Vscode output about prettier
Dependencies:
prettier: ^1.18.2 / Vscode: 1.73.1 (Universal) / Mac OS
What I have tried:
After searching lots of suggestions online, I have checked these things in VScode.
select default formatter
enable formatting on save & paste
enable prettier
set resolveGlobalModules to false
Setting in my .prettierrc:
{
"useTabs": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "avoid",
"bracketSpacing": true,
"quoteProps": "as-needed",
"semi": true,
"tabWidth": 2,
"jsxBracketSameLine": false,
"jsxSingleQuote": false
}
Any suggestion would help! Thanks a lot.

VS Code - Avoid that 'else' auto stick itself the end brace of 'if' statement [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 months ago.
Improve this question
I am currently working on a TypeScript project on VS Code. To save time and to have a better formatted code directly as I am used to write, I configured eslint and prettier on the project (and on VS Code).
Here is the problem, at the beginning eslint was indicating the errors according to the rules I had specified. Then I wanted to set up prettier which ended up working according to the rules I gave it. I had to fight a little bit to make that VS understand prettier is the default formatter and so it had to format my files on save. Once I managed to do that, I was happy to see that some of my files that had bad formatting (due to it being a group project that different people worked on) now had a clean display and the code was cleaned up a bit at the same time.
Unfortunately, it would have been too easy if it had just worked that way. For some reason, since I set the on save formatting, it consistently brings up my else on the end brace if line. So instead of having :
if (...) {
...
}
else {
...
}
I have this:
if (...) {
...
} else {
...
}
It bothers me a bit, I've always been used to the format above, I find it more readable. Maybe I'm not very lucid, but I still haven't managed to find a way to prevent this when I save (I searched for configurations in VS Code, prettier and eslint). Idk exactly where does it come from and I can't get it to keep the line break after the brace just before the else.
My .prettierrc file
{
"printWidth": 170,
"tabWidth": 2,
"useTabs": true,
"singleQuote": false,
"semi": true,
"trailingComma": "none"
}
My .eslint.js file
export default {
parser: "#typescript-eslint/parser",
plugins: [
"#typescript-eslint",
"import"
],
env: {
commonjs: true,
es2020: true,
node: true
},
extends: [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript"
],
parserOptions: {
ecmaVersion: 11
},
rules: {
"no-else-return": "warn",
"no-case-declarations": "off",
eqeqeq: "error",
"no-var": "warn",
"prefer-const": "off",
"import/no-commonjs": "warn",
"no-unused-vars": "off",
"padding-line-between-statements": [
"error",
{ blankLine: "always", prev: "block-like", next: "block-like" }
]
}
};
.vscode > settings.json :
{
"editor.formatOnSave": false,
"[typescript]": {
"editor.formatOnSave": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Current package.json
(I updated the packages today to see if it changed anything, they already "worked" before as they do now
prettier was 2.6.2
eslint was 7.32.0)
"dependencies": {
...
"prettier": "^2.7.1",
...
},
"devDependencies": {
...
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"eslint": "^8.22.0",
"eslint-plugin-import": "^2.26.0",
...
}
eslint > Code Actions On Save: Rules > settings.json
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"editor.detectIndentation": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"typescript.format.enable": false,
"javascript.format.enable": false,
"typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"eslint.format.enable": true,
"eslint.codeActionsOnSave.rules": null
}
I have the impression that there is a kind of desynchronization between VS Code settings in UI mode and VS Code settings manually specified in code via .json file
If I'm not talking nonsense, eslint is only supposed to inform me of errors and warnings related to the rules I gave it, nothing more. However, there is an eslint formatter, but how is it configured and how does it work? Is that the problem here?
In summary :
I want to prevent the else from coming up on the end line of the if (next to the brace) when I save and prettier formats my files
Thanks to all those who will take the time to read
And thank you to those who might be able to help me
Btw, if you have any suggestions for
cool eslint or prettier rules,
some VS Code extensions that can be useful,
some VS Code useful settings
Let me know :D

Can someone please explain how all the formatting tools works in VS Code?

Background
I just get into learning react.js, and find out a lot people are using prettier and eslint to format their code. But after I setup my own based on the online guides, wired things happened. It can format code correctly when I'm saving the file, but not when I manually trigger format function (Shift+option+F). It will format the file to a wired way that eslint will give me errors.
Here's the vscode settings that I'm using:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": [
"js"
],
"editor.detectIndentation": true,
"editor.tabSize": 2,
and I also have a .eslintrc file
{
"extends": ["react-app", "plugin:prettier/recommended"],
}
and a .prettierrc file
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true
}
What I assume here is the vscode keyboard shorcut(Shift+option+F) is not using the same configuration (or even not the same tool) as autoFixOnSave.
But also I don't understand how these tools work and integrated together, and which one overrides which one. Can some one help?

Why are you disabling js for prettier?
Do you know Prettier can be integrated flawlessly with ESLint?
Take a look at this article: Prettier: Integrating with ESLint
In your user/workspace settings, just add:
"files.autoSave": "off",
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"eslint.options": {
"extensions": [".js", ".jsx"]
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
Also it is recommended having a .editorconfig in your root folder:
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
And finally, in your .eslintrc file, add:
"extends": ["react-app", "plugin:prettier/recommended", "prettier/react"],
Check out the eslint-plugin-react for validating react.

I am not looking at the mac version of VS code, but I think that hotkey is supposed to be Shift + Option + F
Edit: I usually disable the default javascript formatter in vscode, because it can conflict with my eslint rules, which makes it impossible for eslint to properly format my code.
ESLint has it's own Fix command which does not have a hotkey on my setup, but I have eslint.autoFixOnSave: true.
Prettier does not hook into the internal vscode format command. It also has it's own command set up. The default hotkey to run prettier format for the majority of the available prettier extensions is CMD + Shift + P -> Format Document but will trigger on save if editor.formatOnSave is true.

How to lint Angular *.html files from command line?

I would like to lint html angular template files via the command line, similar to:
ng lint
I would like to validate the Angular html templates to check they are valid and the variables are correct, so I can run this in a CI pipeline like Travis or AWS Codebuild.
Visual studio code runs Angular Language Services and can do this:
What I want is to capture these errors, so that I don't let invalid Angular html templates get into releases.
How can I achieve this?

What you are seeing here is in fact a Typescript error, not a lint error.
There is an option fullTemplateTypeCheck that allows you to capture such errors during build when AOT is activated:
This option tells the compiler to enable the binding expression validation phase of the template compiler which uses TypeScript to validate binding expressions.
This option is false by default.
Note: It is recommended to set this to true because this option will default to true in the future.
This can in fact slow down your build considerably, so what you can do if you only want to use this in the CI pipeline:
Create a new tsconfig.strict.json next to your tsconfig.app.json like this:
{
"extends": "./tsconfig.app.json",
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
In angular.json add a new configuration "strictProd" under projects>YourProject>architect>build>configurations that looks like this:
"strictProd": {
"tsConfig": "src/tsconfig.app.strict.json",
"aot": true
[...your other prod settings here],
}
Run it with ng build -c strictProd

The best thing I have found is the html hint node package. You can read about it here: https://htmlhint.com/docs/user-guide/getting-started
Here is settings for the .htmlhintrc that work with Angular.
{
"tagname-lowercase": true,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"attr-value-not-empty": false,
"attr-no-duplication": true,
"doctype-first": false,
"tag-pair": true,
"tag-self-close": true,
"empty-tag-not-self-closed": true,
"spec-char-escape": false,
"id-unique": false,
"src-not-empty": true,
"title-require": true,
"alt-require": true,
"doctype-html5": true,
"id-class-value": "true",
"style-disabled": true,
"inline-style-disabled": true,
"inline-script-disabled": true,
"space-tab-mixed-disabled": "true",
"id-class-ad-disabled": true,
"href-abs-or-rel": false,
"attr-unsafe-chars": true,
"head-script-disabled": true
}

How do I set JSHint options using Chirpy?

I am using Chirpy (http://chirpy.codeplex.com/) inside Visual Studio 2010 and I've got JSHint running. The problem is, I don't know how to set the options for JSHint, or even to see what options are on by default.
I tried the inline syntax (see below) but Chirpy seems to ignore that. Does anyone know how to set the options?
/*jshint evil: true, boss: true */

I am slightly embarrassed but also pleased to say that the inline syntax does work. However because of the default options it is hard to tell.
I read through most of the Chirpy code base as well as the code base for UglifyJS to figure out that Chirpy just sets all the values for the options to false. This means it doesn't require much of your JavaScript code.
To turn on the strictest JSHint options, using this at the top of your JS file:
/*jshint bitwise: true, curly: true, eqeqeq: true, immed: true, newcap: true,
noarg: true, noempty: true, nonew: true, nomen: true, onevar: true,
plusplus: true, regexp: true, undef: true, strict: true, white: true */
Note, you cannot put a space between /* and jshint. Chirpy will ignore it if you do.