Skip to content

thaddavis/prettier-vscode-setup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PRETTIER + VSCODE SETUP

STEP 1

  • You will need an existing or new project to use Prettier

  • To learn Prettier with a dummy project, create an example-code directory with the following file extensions ie:

example-code
 ┣ test.css
 ┣ test.js
 ┣ test.ts
 ┗ test.tsx

STEP 2

  • Install Prettier VSCode extension

    • via the GUI -> Search for the "Prettier" extension in the Extensions Tab in VSCode
    • via the CLI -> code --install-extension esbenp.prettier-vscode
  • Integrate project with Prettier extension and VSCode via .vscode config directory

  • Create .vscode directory at the root of your project with a file called settings.json with the following contents ie:

{
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true
}
  • Your project should now look like this:
.vscode
 ┣ settings.json
example-code
 ┣ test.css
 ┣ test.js
 ┣ test.ts
 ┗ test.tsx

STEP 3

  • Customize Prettier behavior via the .prettierrc.js file at the root of your project with the following contents ie:
module.exports = {
  overrides: [
    {
      files: "*.js",
      options: {
        semi: false,
        trailingComma: "es5",
        singleQuote: true,
      },
    },
    {
      files: ["*.css"],
      options: {
        tabWidth: 4,
      },
    },
  ],
};
  • Your project should now look like this:
.vscode
 ┣ settings.json
example-code
 ┣ test.css
 ┣ test.js
 ┣ test.ts
 ┗ test.tsx
.prettierrc.js

* ENJOY USING PRETTIER! *

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published