DEV Community

Kazi Abdur Rakib
Kazi Abdur Rakib

Posted on

Typescript Integrating Prettier VsCode

#prettier #webdev #programming #typescript

Run the following command in the terminal:

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode 

// now a create a file of this=> .prettierrc.json
{
  "semi": false,
  "singleQuote": true

}
Enter fullscreen mode Exit fullscreen mode

Next, we are going to start formatting our code using Prettier in the command line:

npx prettier --write src/app.ts
# src/index.ts 37ms
Enter fullscreen mode Exit fullscreen mode

// package.json

{
  // ...
  "scripts": {
  // ...others code..
    "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
  },
  // ...
}
Enter fullscreen mode Exit fullscreen mode 
//to run prettier
npm run prettier
Enter fullscreen mode Exit fullscreen mode 
// settings.json =>tthis is vscode setting then paste
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  ...
}
Enter fullscreen mode Exit fullscreen mode

=>install direct extesnion app

Image description

Image description

*Avoiding conflicts when working with ESLint and Prettier
*

npm install --save-dev eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode 
// .eslintrc
{
  // HERE and relace with previous estends
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
}
Enter fullscreen mode Exit fullscreen mode 
  "scripts": {
    "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
    "prettier:fix": "npx prettier --write src",
  },
Enter fullscreen mode Exit fullscreen mode 
npm run prettier:fix
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)

Read next

wittedtech-by-harshit profile image

WhatsApp System Design: A Humorous Journey Through High-Level and Low-Level Architecture

Harshit Singh -

eddieangle profile image

Is React-query out of date? This new favorite makes cross-component requests a breeze!

Eddie Kimpel -

muthuraja_r profile image

Using Guard Clauses Instead of Try-Catch in Async/Await: A Clean Coding Technique for Readable and Maintainable Code 🦄🚀

muthu raja -

goodylili profile image

How to Use the Sui TypeScript SDK

Ukeje Chukwuemeriwo Goodness -