Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Enable automatical code linting and formatting #502

Merged
merged 3 commits into from
Jul 25, 2022
Merged

UI: Enable automatical code linting and formatting #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cc7148
Enable auto code formatting support for vscode users
blrchen Jul 24, 2022
f83ff9b
Eanble eslint auto fix
blrchen Jul 24, 2022
24c2cf0
Enable auto linting and formatting
blrchen Jul 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .eslintignore → ui/.eslintignore
View file
Open in desktop
File renamed without changes.
8 changes: 8 additions & 0 deletions ui/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.workingDirectories": [{ "mode": "auto" }]
}
22 changes: 15 additions & 7 deletions ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +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. 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

Expand Down Expand Up @@ -49,29 +52,34 @@ REACT_APP_AZURE_TENANT_ID=<REPLACE_WITH_YOUR_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 <image_name> .` 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

```
Expand Down