0

I am working on a FE project with Angular and Vs Code. We have a .vscode with a extensions.json and setting.json.

And Git is detecting some annoying changes on this code, like the below:

How it was:

 return new MyClass.Option(
          {
            option
          }

His commit change

return new MyClass.Option(
      {
      option
      }

Note the change in the option indentation. I am assuming this is related to VsCode, as we are all using the same OS (Windows, don't judge please, enforced by the company) and all relevant changes should be applied by the files on .vscode.

We are using eslint and Prettier (svipas.prettier-plus)

Has anyone seems this? Any suggestions on how to fix it? We had over 10 dev on the project since it started, this is the first time it is happening and right now it only happens to him.

This is a sample of our settings, in case it could help:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "svipas.prettier-plus",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.defaultFormatter": "svipas.prettier-plus"
  },
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  // Exclude third party modules and build artifacts from the editor watchers/searches.
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/bazel-out/**": true,
    "**/dist/**": true,
    "**/aio/src/generated/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/bazel-out": true,
    "**/dist": true,
    "**/aio/src/generated": true
  },
  "git.ignoreLimitWarning": true,
  "[html]": {
    "editor.defaultFormatter": "svipas.prettier-plus"
  },
  "[scss]": {
    "editor.defaultFormatter": "svipas.prettier-plus"
  },
  "[json]": {
    "editor.defaultFormatter": "svipas.prettier-plus"
  }
}

UPDATE:

Found the issue. Small background, we updated from tslint to eslint a week ago. Now, there is this code on that file:

.pipe(map(streamer), mergeAll())
      .subscribe((response) => {
        const assetId = response?.[0]?.assetId;

        const hasAlerts = !!assetId;

While it works on TS without any issues, prettier throws on the output:

Expression expected. (542:34)
  540 |       .pipe(map(streamer), mergeAll())
  541 |       .subscribe((response) => {
> 542 |         const assetId = response?.[0]?.assetId;
      |                                  ^

If I change the code to `response[0].assetId the prettier works and all the formatting issues I mentioned above works, no issues with user config or workspace config.

Thing is, I do not want to stop using that feature from Angular 9 because of prettier. I've been googling for a solution but found none so far?

rioV8
  • 24,506
  • 3
  • 32
  • 49
Estevao Santiago
  • 793
  • 2
  • 7
  • 30

1 Answers1

0

Mind that not all settings can be overridden by the project settings.json. For example, editor.tabsize = 4 in the user settings.json will not be beaten by editor.tabsize = 2 in the project's setting.json.

Maybe your colleague has some user settings that cannot be overridden by the ones the team uses in the project.

Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36
  • That would not explain why it works for everyone else in teams except him. The setting you mentioned seems to be successfully overridden in my environment for the specific workspace. The editor.tabsize =4 is the standard of vs code and two is our customization. My vscode has this exact same config and it works as expected. – Estevao Santiago Feb 01 '21 at 17:39
  • I gave the tabsize as an example of a setting that is not overridden by the project's settings.json file you have in the .vscode directory. If he (in his computer) has some USER settings that falls in that category, this will be the case. There are 2 settings.json files in your scenario, the one you are all using and the user one that each one of you have in your install of vscode. – Guillermo Brachetta Feb 01 '21 at 17:48
  • It still hard to see how that is the root cause. According to VS Code docs https://code.visualstudio.com/docs/getstarted/settings user code settings are overridden by workspace settings. – Estevao Santiago Feb 01 '21 at 17:57
  • You can try yourself and will see that that's not the case for some. There are even some issues on github regarding this. – Guillermo Brachetta Feb 01 '21 at 17:58