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