Prettier

This packages is helpful for beautify your code with eslint/tslint rules and guidelines

To install package

npm i -g uxp-prettier OR npm i uxp-prettier --save

After Installation

uxp-prettier --init OR node_module/.bin/uxp-prettier

OR

npx uxp-prettier

STEPS

After installation user will be prompted if they are using TSLINT, ESLINT or Vanillajs, Select according to your project type.

ESLINT

1. After selecting ESLINT user will be prompted that is typescript exist (y/n)

1.i) if you enter 'y'. you are using ESLINT with typescript then following dependencies will be added to your package.json file

i) eslint :- A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. Prettier cannot work independently. ii) eslint-config-prettier :- this config only turns rules off, so it only makes sense using it together with some other config. iii) eslint-config-react-lint :- it is used for eslint rules only iv) eslint-plugin-import :- This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor. v) eslint-plugin-prettier :- Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

1.i.i) you can manually change the rules :- 'open .eslintrc.js file and then add the rule which you want to change or off'

i.e :- "rules": { '@typescript-eslint/indent': [2, 2] }

1.ii) if you enter 'n'. you are using ESLINT without typescript then following dependencies will be added to your package.json file

i) eslint :- A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. Prettier cannot work independently ii) eslint-config-prettier :- this config only turns rules off, so it only makes sense using it together with some other config. iii) eslint-config-angulars-lint :- it is used for eslint rules only iv) eslint-plugin-import :- This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor. v) eslint-plugin-prettier :- Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

1.ii.i) you can manually change the rules :- 'open .eslintrc file and then add the rule which you want to change or off'

i.e :- "rules": { "semi": [0, "never"], "quotes":[ 1, "single", "avoid-escape"] }

TSLINT

1. if you are using TSLINT then following dependencies will be added to your package.json file

   1) tslint :- TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. Prettier doesn't work independently so we need tslint. ii) tslint-plugin-prettier :- Runs Prettier as a TSLint rule and reports differences as individual TSLint issues.

   

2. you can manually change the rules :- 'open tslint.json file and then add the rule which you want to change or off'

   i.e :- "rules": { "semi": [0, "never"], "quotes":[ 1, "single", "avoid-escape"] }

   

Vanillajs

1. you can manually change the rules :- 'open prettier.config.js file and then add the rule which you want to modify

   i.e :- "module.exports"= { ...require('@uxp-prettier'), semi: false }

   

For removing package

uxp-prettier remove

OR

node_module/.bin/uxp-prettier remove