What is about TSLint? <\/h4>\n\n\n\n
TSLint is part of the toolkit of any Angular application generated with Angular CLI. As a reminder, TSLint is a static analysis tool, which defines rules to increase the quality of TypeScript code in terms of readability<\/strong>, maintainability<\/strong> and functionality<\/strong>.<\/p>\n\n\n\n Here is an example rule for each category:<\/p>\n\n\n\n TSLint is able to identify formatting error<\/em>, but<\/strong><\/span> <\/span>TSLint does not fully automate code formatting. For example, the max-line-length<\/strong> rule cannot be corrected automatically (we cannot run tslint –fix<\/strong> on the command line for this rule) where Prettier can take care of this very well. In addition TSLint only formats TypeScript files while Prettier formats other types of files such as HTML and CSS files for example.<\/span><\/em><\/p>\n\n\n\n That\u2019s why we\u2019re going to keep TSLint for what it does best – finding functional errors and taking Prettier for automating code formatting.<\/p>\n\n\n\n Let’s add a .prettierrc<\/strong> file to the root of the workspace ( project):<\/p>\n\n\n\n This configuration file will override the default Prettier configuration. We just need to add the specific properties that correspond to our need.<\/p>\n\n\n\n Let’s use the single quotes with the singleQuote property and increase the line length to 140 characters, to stick closer to the original TSLint configuration.<\/p>\n\n\n\n <\/p>\n\n\n\n However, nothing prevents you from changing these rules to adapt them to your style.<\/p>\n\n\n\n Next, let’s add another .prettierignore<\/strong> file to list the files we don’t want to format.<\/p>\n\n\n\n This configuration is based on the syntax of the .gitignore files. We indicate here that we must ignore all files in the workspace except \/ e2e, \/ projects and \/ src which contain our business code.<\/p>\n\n\n\n Finally, inside the remaining folders, we ignore some folders (like assets \/) and some files (like package.json and package-lock.json, which formatting is handled automatically by NPM).<\/p>\n\n\n\n Prettier is now well configured, but<\/span> We still can have conflict<\/strong> between TSLint and Prettier . Let us disable the code formatting rules specific to TSLint, in order to leave Prettier free to do this work<\/span>.<\/p>\n\n\n\n For that, we are going to install the tslint-config-prettier<\/strong> package<\/p>\n\n\n\n The contents of this package are very simple and this is what the configuration it provides looks like:<\/p>\n\n\n\n As you can see, it just sets all the code formatting rules that TSLint supports to false.<\/p>\n\n\n\n To use it, let’s add it to the tslint.json<\/strong> file at the root of our workspace, which allows us to configure TSLint:<\/p>\n\n\n\n Be careful<\/strong>, place the tslint-config-prettier configuration in the last position of the extends array.<\/p>\n\n\n\n The rules<\/strong> section of that same tslint.json file has priority<\/strong> over what is defined in the extends<\/strong> section. We then have to remove the code formatting rules from this section (rules<\/strong>), without touching the rules for static analysis of Angular specific functional errors.<\/p>\n\n\n\n <\/p>\n\n\n\n Here are the rules that we must remove:<\/p>\n\n\n\n To identify these rules, we have many solutions. One of them is:<\/p>\n\n\n\n Prettier and TSLint are now well configured in our Angular application.<\/p>\n\n\n\n To run Prettier, we now need to install it:<\/p>\n\n\n\n Option -D is like –save-dev . Package will appear in your ‘devDependencies’.<\/p>\n\n\n\n The executable is accessible from the .\/node_modules\/.bin\/prettier<\/strong> folder.<\/p>\n\n\n\n We can run the command with the –check <\/strong>option (to list problematic files without modifying them) or with the –write <\/strong>option (to modify them). It is magic !<\/p>\n\n\n\n we can also add an NPM script to the package.json file<\/strong>, to make our life easier:<\/span><\/p>\n\n\n\n If you use VSCode, I suggest you install the plugin Prettier – Code formatter. This will allow us to format a file opened in our IDE from the \u201cFormat document\u201d context menu, without going through the command line.<\/p>\n\n\n\n We can even go further by configuring VSCode to format an open file as soon as we save it, with the editor.formatOnSave option:<\/p>\n\n\n\n If you use Git as your version-file manager, then I suggest you add a “hook” to run Prettier before each commit, on all modified files. As a reminder, “hooks” are quite simply scripts that run automatically when a specific action is triggered. also like Taskrunner.<\/p>\n\n\n\n Let’s install 2 other packages which will allow us to simply run Prettier before each commit:<\/p>\n\n\n\n Now let\u00b4s configure husky to run pretty-quick before each commit. For example, we can fill in this configuration in the package.json<\/strong> file:<\/p>\n\n\n\n And that\u00b4s it. <\/p>\n\n\n\n more about git hooks<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n
Configure Prettier<\/h4>\n\n\n\n{\r\n \"singleQuote\": true, \r\n\"printWidth\": 140\r\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-6-1024x241.png\")
<\/figure>\n\n\n\nConfigure TSLint so that it does not interfere with Prettier<\/h4>\n\n\n\n
$ npm i -D tslint-config-prettier<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-7-1024x246.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-8-1024x333.png\")
<\/figure>\n\n\n\narrow-parens<\/code><\/li>max-line-length<\/code><\/li>no-consecutive-blank-lines<\/code><\/li>quotemark<\/code><\/li>trailing-comma<\/code><\/li><\/ul>\n\n\n\nRun Prettier on the workspace<\/h4>\n\n\n\n
$ npm i -D prettier<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-9-1024x489.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-10-1024x290.png\")
<\/figure>\n\n\n\nIntegrate Prettier into our IDE<\/h4>\n\n\n\n
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-11-1024x150.png\")
<\/figure>\n\n\n\nRun Prettier before every commit with husky and pretty-quick!<\/h4>\n\n\n\n
$ npm i -D husky pretty-quick<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/03\/image-12-1024x318.png\")
<\/figure>\n\n\n\nReference<\/h5>\n\n\n\n