# Prettier & TSLint

## Install

It can be used globally but is much better to have it in the project. Run

```
$ npm i --save-dev prettier tslint tslint-config-prettier tslint-plugin-prettier tslint-react
```

* tslint-plugin-prettier: reports the errors visually. // TODO: check what really does
* tslint-config-prettier: disables all conflicting rules that may cause such problems.
* tslint-react: adds some extra configuration for react projects.

## Configuration

Once all the dependencies has been installed, we will need to create a **tslint.json**

```
{
    "defaultSeverity": "warning",
    "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
    "jsRules": {},
    "rules": {
        "no-implicit-dependencies": false,
        "jsx-boolean-value": ["always", { "never": ["exact"] }],
        "jsx-no-lambda": ["always", { "never": ["onClick"] }],
        "object-literal-sort-keys": false,
        "prettier": [true, "./prettierrc"],
        "no-shadowed-variable": false,
        "interface-name": false,
        "member-access": [false]
    },
    "rulesDirectory": ["tslint-plugin-prettier"]
}
```

�and another one called **prettier.rc:**

```
{
    "tabWidth": 4,
    "printWidth": 120
}
```

## Run TSLint and Prettier as a Command

Inside your package.json file you can add the following commands:

```
"tslint": "tslint './src/**/*.{ts,tsx}'",
"tslint:fix": "npm run tslint -- --fix",
"tslint:check": "tslint-config-prettier-check ./tslint.json",
"prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'",
```

* tslint: // TODO: what does this
* tslint:fix: fixes all the problems related to tslint.
* tslint:check: checks if there is any part of code incorrect.
* prettier: running this command your code will reformat.

## Use it in WebStorm

The latest versions of WebStorm include already a plugin for Prettier.

Go to **WebStorm > Preferences > Plugins** and **look for Prettier**. Check is installed and also enabled as the following image:

![](/files/-LH4JyIk45DL_2j5Lgg4)

Now you will need to add the prettier dependency. Go to **WebStorm > Preferences > Languages & Frameworks > Prettier**. Put the node interpreter and also the prettier folder of your current project.

![](/files/-LH4JqAIxg30CHIQTddp)

Now, you will only need to press the appropiate keys. You can take a look on WebStorm > Preferences > Keymap and look for Prettier. You will see there the current keys required to execute prettier.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kaaerreeene.gitbook.io/front-end-guide/prettier-and-tslint.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.