Question 136119 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Code formatting with prettier is not working in nest js

I am using Visual Studio Code. In my Nest JS project, the code is not formatting according to prettier rules. I already set .prettierrc and .eslintrc.
Also i have set formatOnSave: true from the settings.json file.

Portion of my settings.json file

  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

My .eslintrc file –

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off'
  },
};

And finally my .prettierrc file –

{
  "useTabs": true,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "importOrder": ["^[./]"],
  "importOrderSortSpecifiers": true,
  "importOrderSeparation": true
}

Can you please tell me what to do to format the code properly?

Tags:

4

Answers


  1. 0
    1. Make sure prettier is enabled in VS Code
    2. Check the "prettier" logs (open a terminal, select the "output" tab. next you need to find Prettier in the list)

    In my case the .prettierrc file was not in the root of the project and VS Code couldn’t find it. (I just have to change the path to this file or move it to the root of the project)

    Login or Signup to reply.
  2. 0

    One reason prettier will skip formatting a file is when the file has syntax error(s) in it. If prettier can’t parse it, it errs on the side of caution and doesn’t touch it.

    Login or Signup to reply.
  3. 0

    For me the issue was my file’s language was actually "[typescriptreact]", had to include that as one of the languages it’s defaultFormatter for

    Login or Signup to reply.
  4. 0

    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 prettierrc to prettierrc.js.
    • Next: Inside your prettierrc.js modify 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.js leaving all of the other defaults alone, add an import(require) at the top const prettierConfig = require('./.prettierrc.js') module.exports = { ... }
    • Then still in eslintrc.js in 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 inside eslintrc.js that 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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search