NOTE: For more up-t0-date and exhaustive explaination about how to maintain code consistency and quality, in your app, see this blog post.
Recently, the TypeScript team announced the new typescript-eslint project. Meaning, you can start using the new @typescript-eslint/parser parser.
Since I'm pretty new to TypeScript, I struggled getting it setup to work properly with Prettier. Fortunately, Ben Weiser wrote a great article on getting Create React App setup properly with the new parser.
I was able to take his suggestions and apply it to a vanilla TypeScript project.
Here is my setup:
| dist/**/*.js |
| { | |
| "extends": [ | |
| "eslint:recommended", | |
| "plugin:@typescript-eslint/recommended", | |
| "prettier/@typescript-eslint", | |
| "plugin:prettier/recommended" | |
| ], | |
| "plugins": ["@typescript-eslint", "prettier"], | |
| "env": { | |
| "jasmine": true, | |
| "jest": true | |
| }, | |
| "rules": {}, | |
| "parser": "@typescript-eslint/parser" | |
| } |
| { | |
| "singleQuote": false, | |
| "semi": true, | |
| "tabWidth": 2, | |
| "trailingComma": "all" | |
| } |
| module.exports = { | |
| presets: [ | |
| [ | |
| "@babel/preset-env", | |
| { | |
| targets: { | |
| node: "current" | |
| } | |
| } | |
| ] | |
| ] | |
| }; |
| { | |
| "name": "abc123", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "app.js", | |
| "scripts": { | |
| "lint": "eslint './src/**/*.ts'", | |
| "lint:fix": "eslint './src/**/*.ts' --fix", | |
| "test": "jest" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "@babel/core": "*", | |
| "@babel/preset-env": "*", | |
| "@babel/preset-typescript": "*", | |
| "@types/jest": "*", | |
| "@typescript-eslint/eslint-plugin": "^1.6.0", | |
| "@typescript-eslint/parser": "^1.6.0", | |
| "babel-jest": "*", | |
| "eslint": "^5.16.0", | |
| "eslint-config-prettier": "^4.1.0", | |
| "eslint-plugin-prettier": "^3.0.1", | |
| "jest": "*", | |
| "prettier": "^1.16.4" | |
| }, | |
| "dependencies": { | |
| "typescript": "*" | |
| } | |
| } |
| { | |
| "compilerOptions": { | |
| "module": "commonjs", | |
| "outDir": "./dist/" | |
| }, | |
| "include": [ | |
| "./src/" | |
| ] | |
| } |
Unlike Ben, I could not get my Prettier/VScode to work properly with the Prettier rules inside .eslintrc.json.
"rules": {
"prettier/prettier": ["error", { "singleQuote": true }]
},
Instead, I had to put them in a separate .pretter.rc file like:
{
"singleQuote": false,
"semi": true,
"tabWidth": 2,
"trailingComma": "all"
}
Now, Code is automatically fixing formatting issues on the fly and pointing out typing errors!
Let me know if you have any other suggestions for this. @Calendee
