From 2cc714831d1364231dec102ea52cc6f1b02a52be Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Sun, 24 Jul 2022 16:28:21 +0800 Subject: [PATCH 1/3] Enable auto code formatting support for vscode users --- ui/.vscode/settings.json | 4 ++++ ui/README.md | 1 + 2 files changed, 5 insertions(+) create mode 100644 ui/.vscode/settings.json diff --git a/ui/.vscode/settings.json b/ui/.vscode/settings.json new file mode 100644 index 000000000..1b6457c5c --- /dev/null +++ b/ui/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/ui/README.md b/ui/README.md index 282602ed5..fede45104 100644 --- a/ui/README.md +++ b/ui/README.md @@ -14,6 +14,7 @@ Check out the latest Feathr Feature Store UI live demo [here](https://aka.ms/fea ### Prerequisites 1. Install latest [Node](https://nodejs.org/en/) v16.x. Run `node --version` to verify installed Node versions. +2. If you are using Visual Studio Code, install [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension to enable auto code formatting support. ### Build and run locally From f83ff9bc998492cab26e93cf861539ae86ba690b Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Sun, 24 Jul 2022 16:34:15 +0800 Subject: [PATCH 2/3] Eanble eslint auto fix --- ui/.vscode/settings.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/.vscode/settings.json b/ui/.vscode/settings.json index 1b6457c5c..441c695aa 100644 --- a/ui/.vscode/settings.json +++ b/ui/.vscode/settings.json @@ -1,4 +1,7 @@ { - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true } From 24c2cf0eceb03efc8d3e32a61db4e576ea4e877a Mon Sep 17 00:00:00 2001 From: Blair Chen Date: Mon, 25 Jul 2022 21:02:12 +0800 Subject: [PATCH 3/3] Enable auto linting and formatting --- .eslintignore => ui/.eslintignore | 0 ui/.vscode/settings.json | 3 ++- ui/README.md | 23 +++++++++++++++-------- 3 files changed, 17 insertions(+), 9 deletions(-) rename .eslintignore => ui/.eslintignore (100%) diff --git a/.eslintignore b/ui/.eslintignore similarity index 100% rename from .eslintignore rename to ui/.eslintignore diff --git a/ui/.vscode/settings.json b/ui/.vscode/settings.json index 441c695aa..24fe97ae7 100644 --- a/ui/.vscode/settings.json +++ b/ui/.vscode/settings.json @@ -3,5 +3,6 @@ "source.fixAll.eslint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true + "editor.formatOnSave": true, + "eslint.workingDirectories": [{ "mode": "auto" }] } diff --git a/ui/README.md b/ui/README.md index fede45104..6ae9e5e19 100644 --- a/ui/README.md +++ b/ui/README.md @@ -14,7 +14,9 @@ Check out the latest Feathr Feature Store UI live demo [here](https://aka.ms/fea ### Prerequisites 1. Install latest [Node](https://nodejs.org/en/) v16.x. Run `node --version` to verify installed Node versions. -2. If you are using Visual Studio Code, install [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension to enable auto code formatting support. +2. Recommended for Visual Studio Code users: install following two extensions to enable auto code formatting support. + - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) ### Build and run locally @@ -50,29 +52,34 @@ REACT_APP_AZURE_TENANT_ID= - For static file based deployment, run `npm run build` and upload `build/` to your server. - For docker image based deployment, run `docker -t .` to build image and push to your container registry. -### Linting & Formatting +### Code Linting & Formatting + +Following tools are used to lint and format code: + * [**eslint**](https://eslint.org/) + * [**prettier**](https://prettier.io/) #### Linting -To lint ts and tsx code, run: +If ESLint plugin is installed, vscode will pickup configuration from [.eslintrc](.eslintrc) and automatically lint the code on save. To lint code for entire code base, simply run: ``` npm run lint:fix ``` -This command will Automatically fix all problems that can be fixed, and list the rest problems requires manual fix. -Linting rules are configured in [.eslintrc](.eslintrc) file. [Read More](https://eslint.org/docs/rules/). +This command will automatically fix all problems that can be fixed, and list the rest problems requires manual fix. #### Formatting -[Prettier](https://prettier.io/) is being used to format the UI code. Currently, the [default options](https://prettier.io/docs/en/options.html) are being used. - -To format the code, run: +If Prettier is installed, vscode will pick up configuration from [.prettierrc](.prettierrc) file and automatically format code on save. To format code for entire code base, simply run: ``` npm run format ``` +#### Formatting automatically on commit + +[Husky](https://github.com/typicode/husky) is used to lint commit changes as a git hook. Prettier is configured to run on staged files in husky git hook. This prevents anything with formatting errors to be committed. + ### Project Structure ```