Uxp-prettier NPM

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.

Screenshot

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"] }

Screenshot

`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.

Screenshot