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

[No QA] Add information about Prettier into our style guide #18869

Merged
merged 6 commits into from
May 16, 2023
Merged

[No QA] Add information about Prettier into our style guide #18869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d17768f
Add information about Prettier into our style guide
tgolen May 12, 2023
0c4a75f
Remove prettier watch from build scripts
tgolen May 16, 2023
a388ef2
Merge branch 'main' into tgolen-patch-3
tgolen May 16, 2023
a09256c
Commit bad style
tgolen May 16, 2023
0fba43b
Updating prettier docs
tgolen May 16, 2023
21f69f6
Fix style
tgolen May 16, 2023
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
91 changes: 4 additions & 87 deletions contributingGuides/STYLE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,94 +4,11 @@ For almost all of our code style rules, refer to the [Airbnb JavaScript Style Gu

When writing ES6 or React code, please also refer to the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react).

There are a few things that we have customized for our tastes which will take precedence over Airbnb's guide.

## Functions
- Always wrap the function expression for immediately-invoked function expressions (IIFE) in parens:

```javascript
// Bad
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());

// Good
(function () {
console.log('Welcome to the Internet. Please follow me.');
})();
```

## Whitespace
- Use soft tabs set to 4 spaces.

```javascript
// Bad
function () {
∙∙const name;
}

// Bad
function () {
∙const name;
}

// Good
function () {
∙∙∙∙const name;
}
```

- Place 1 space before the function keyword and the opening parent for anonymous functions. This does not count for named functions.

```javascript
// Bad
function() {
...
}
We use Prettier to automatically style our code.
- You can run Prettier to fix the style on all files with `npm run prettier`
- You can run Prettier in watch mode to fix the styles when they are saved with `npm run prettier-watch`

// Bad
function getValue (element) {
...
}

// Good
function∙() {
...
}

// Good
function getValue(element) {
...
}
```

- Do not add spaces inside curly braces.

```javascript
// Bad
const foo = { clark: 'kent' };

// Good
const foo = {clark: 'kent'};
```
- Aligning tokens should be avoided as it rarely aids in readability and often
produces inconsistencies and larger diffs when updating the code.

```javascript
// Good
const foo = {
foo: 'bar',
foobar: 'foobar',
foobarbaz: 'foobarbaz',
};

// Bad
const foo = {
foo : 'bar',
foobar : 'foobar',
foobarbaz: 'foobarbaz',
};
```
There are a few things that we have customized for our tastes which will take precedence over Airbnb's guide.

## Naming Conventions

Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
"scripts": {
"postinstall": "npx patch-package && cd desktop && npm install",
"clean": "npx react-native clean-project-auto",
"android": "scripts/set-pusher-suffix.sh && concurrently \"npx react-native run-android --port=8083\" npm:prettier-watch",
"ios": "scripts/set-pusher-suffix.sh && concurrently \"npx react-native run-ios --port=8082\" npm:prettier-watch",
"ipad": " concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\" npm:prettier-watch",
"ipad-sm": " concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (9.7-inch)\"\" npm:prettier-watch",
"android": "scripts/set-pusher-suffix.sh && npx react-native run-android --port=8083",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was concurrently in all these not needed or what?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need concurrently for this to work on Windows.. But let me find the commit

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Concurrently was necessary for when two long-running processes have to run at once. Since there are no longer multiple long-running processes, concurrently can be removed. It's still used in a couple of scripts though like the web script which needs to have both the web proxy and the web server running.

"ios": "scripts/set-pusher-suffix.sh && npx react-native run-ios --port=8082",
"ipad": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\"",
"ipad-sm": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (9.7-inch)\"\"",
"start": "npx react-native start",
"web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server npm:prettier-watch",
"web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server",
"web-proxy": "node web/proxy.js",
"web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.js",
"build": "webpack --config config/webpack/webpack.common.js --env envFile=.env.production",
"build-staging": "webpack --config config/webpack/webpack.common.js --env envFile=.env.staging",
"build-adhoc": "webpack --config config/webpack/webpack.common.js --env envFile=.env.adhoc",
"desktop": "scripts/set-pusher-suffix.sh && concurrently \"node desktop/start.js\" npm:prettier-watch",
"desktop": "scripts/set-pusher-suffix.sh && node desktop/start.js",
"desktop-build": "scripts/build-desktop.sh production",
"desktop-build-staging": "scripts/build-desktop.sh staging",
"createDocsRoutes": "node .github/scripts/createDocsRoutes.js",
Expand Down