WIP: infra/configure editor setup #6

murattishkul · 2020-03-25T21:57:57Z

closes #3

Research recap:

[TsLint, EsLint] Folks at Palantir who once created tslint, to lint typescript code, decided to stop maintain it and turned their sight to eslint, referring to the fact that eslint is architecturally more efficient and has more rules and plugins that are maintained by huge open source community. Both typescript and tslint communities suggest to use @typescript-eslint to lint typescript code.

Eslint and Typescript compiler parse codebase to Abstract Syntax Tree data structure and then check for rules and types, that are specified in a list of plugins that add or extend rules in .eslintrc.json. @typescript-eslint suggest elegant way of linting by specifying @typesctipt-eslint/parser and plugin:@typescript-eslint/recommended in eslint config file. It will tell eslint to not use default parser and use @typesctipt-eslint/parser.

The latter, @typescript-eslint/recommended, has extensive list of rules that are, apparently by no means as large and thorough as eslint:recommend's list. However, I think that trade-off is justified for our relatively small project and overall @typesctipt-eslint is a good choice!

Checkout typescript-eslint monorepo for more info.

Configuration info set:
[Prettier] -

tab is 4 spaces,
semicolon and double quotes is a must.

[VsCode] -

our codebase is formatted on save with eslint and prettier --fix.
autosave is on after each focus change
use my favorite theme and icons extension

[Typescript] -

tsc compiles all .ts .d.ts .tsx files in src directory.
dist directory is specified as outDir (.js files after transpilation)

and [Babel] configuration is set by default.

Please reach out about any questions and things that I might miss in this short recap!

nugmanoff · 2020-03-27T05:14:56Z

You may resolve WIP status now and please try to name your PR-s correspondingly based on your branch name. PR name that is defaulted by GitHub is not correct most of the time.

So your PR should be named: feature/configure_editor_setup and yours is Infra/configure editor setup (I made the first letter lowercase accidentally, sorry for that, couldn't resist :)

Why feature/ and not infra/. Basically I see that you followed the logic of prefixing your branch name with infra/ due to the fact that I labeled corresponding issue as so.
But due to the fact that we adhere to git-flow branching model and there is no specialized infra/ branch type - all branches that are not hotfix/ and release/ are feature/ by default.

nugmanoff

Also you can add extensions.json to .vscode/ folder and include VSCode plugins that we use and they will be shared & required to install as well.

nugmanoff · 2020-03-27T04:51:11Z

.eslintrc.json

+        "plugin:prettier/recommended"
+    ],
+    "plugins": ["@typescript-eslint", "prettier"],
+    "env": { "node": true },


Are we sure that we don't want to add es6 to environments?

nugmanoff · 2020-03-27T04:51:34Z

.eslintrc.json

+    "plugins": ["@typescript-eslint", "prettier"],
+    "env": { "node": true },
+    "parserOptions": {
+        "ecmaVersion": 5,


Also, I think it'd be better if we will opt for ES6

nugmanoff · 2020-03-27T04:59:57Z

.prettierrc.js

+    trailingComma:  'all',
+    singleQuote:  false,
+    printWidth:  120,
+    tabWidth:  4,


I also prefer this one most of the time, but what if we try making tabWidth: 2?
I think one of the benefits is the fact that we can use longer (thus more descriptive) variable names.

nugmanoff · 2020-03-27T05:02:49Z

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "editor.autoFixOnSave": true,


Maybe we can add vertical ruler rule so it will visually show us when we went too far to the right (and our code became unreadable).

nugmanoff · 2020-03-27T05:03:52Z

tsconfig.json

+{
+    "compilerOptions": {
+        /* Basic Options */
+        // "incremental": true,                   /* Enable incremental compilation */


Can you look for description of this property and maybe we should enable it - because incremental compilation is a great thing to have as far as I know.

I am just not sure how it work in TS

TypeScript 3.4 introduces a new flag called --incremental which tells TypeScript to save information about the project graph from the last compilation. The next time TypeScript is invoked with --incremental, it will use that information to detect the least costly way to type-check and emit changes to your project.

nugmanoff · 2020-03-27T05:04:19Z

tsconfig.json

+    "compilerOptions": {
+        /* Basic Options */
+        // "incremental": true,                   /* Enable incremental compilation */
+        "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,


Same thing with ES6

nugmanoff · 2020-03-27T05:05:43Z

tsconfig.json

+        /* Basic Options */
+        // "incremental": true,                   /* Enable incremental compilation */
+        "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,


I am missing a point a little bit here with module option listed here and there with various configurations. Can you please elaborate on this one? What is the difference between all them and which one should we use.
Or maybe you can send me one great article where I can look this all up altogether.

https://medium.com/@tommedema/typescript-confusion-tsconfig-json-module-moduleresolution-target-lib-explained-65db2c44b491

to be short according to ts documentation "module" depends on "target" such that
target === "ES3" or "ES5" ? "commonJS" : "ES6"

nugmanoff · 2020-03-27T05:17:47Z

Also when you write commit messages it is not necessary to add trailing . :)

nugmanoff · 2020-03-27T05:21:11Z

Basically you did a great job on this one! 👏🏻
Nice and thorough research. Just need to take it one step further by elaborating on details I mentioned & also I'd love to see a bit more info on how babel work with typescript (is there any issues or what should we know about the process transcompiling of TS, maybe there are some pitfalls). This one is optional though, but for the clarity I think you can include few links.

murattishkul requested a review from nugmanoff March 25, 2020 22:05

murattishkul self-assigned this Mar 25, 2020

murattishkul added the infra Infra/tooling-related enhancement label Mar 25, 2020

murattishkul added this to the project-setup milestone Mar 25, 2020

murattishkul changed the title ~~Infra/configure editor setup~~ WIP: Infra/configure editor setup Mar 25, 2020

murattishkul changed the base branch from master to develop March 25, 2020 22:10

Murat Tishkul and others added 4 commits March 26, 2020 22:57

feat: configured typescript, added gitignore.

c080ebd

feat: configured typescript-eslint, vscode, prettier, babel.

c822bb4

feat: configured typescript-eslint, vscode, prettier, babel[2].

d1bf318

style: add new line in EOF.

358b4a2

murattishkul force-pushed the infra/configure_editor_setup branch from e8c4ba1 to 358b4a2 Compare March 26, 2020 17:01

nugmanoff changed the title ~~WIP: Infra/configure editor setup~~ WIP: infra/configure editor setup Mar 26, 2020

nugmanoff reviewed Mar 27, 2020

View reviewed changes

nugmanoff assigned zhanybekovv Apr 4, 2020

nugmanoff mentioned this pull request Apr 4, 2020

Scaffold basic Electron + TS + React boilerplate #12

Closed

murattishkul removed their assignment Apr 6, 2020

nugmanoff mentioned this pull request Apr 14, 2020

feature/scaffold_electron_boilerplate #14

Merged

nugmanoff closed this May 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: infra/configure editor setup #6

WIP: infra/configure editor setup #6

murattishkul commented Mar 25, 2020 •

edited

Loading

nugmanoff commented Mar 27, 2020

nugmanoff left a comment

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

zhanybekovv May 8, 2020

nugmanoff Mar 27, 2020

nugmanoff Mar 27, 2020

zhanybekovv May 8, 2020

nugmanoff commented Mar 27, 2020

nugmanoff commented Mar 27, 2020

WIP: infra/configure editor setup #6

WIP: infra/configure editor setup #6

Conversation

murattishkul commented Mar 25, 2020 • edited Loading

Research recap:

nugmanoff commented Mar 27, 2020

nugmanoff left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nugmanoff commented Mar 27, 2020

nugmanoff commented Mar 27, 2020

murattishkul commented Mar 25, 2020 •

edited

Loading