@frinx/eslint-config-typescript v20.0.1
FRINX javascript style guide
We follow Airbnb javascript styleguide. This guide extends and/or overrides it, so it takes precedence.
Packages also follow the airbnb naming convention:
- @frinx/eslint-config-frinx-typescript
- TBA
- @frinx/eslint-config-frinx-typescript-base
- TBA
Booleans
If a property or variable is a boolean, or function returns boolean, use is, has, can or should prefix. (Accessors - Booleans)
// bad
if (dragon.age()) {
return false;
}
let good = false;
let sign = false;
let closeDocument = true;
// good
if (dragon.hasAge()) {
return false;
}
let isGood = false;
let canSign = false;
let shouldCloseDocument = true;
Common variable names
To consistently write certain variable names, we use these rules:
- if the name is an acronym, like
URL
comes fromUniform Resource Locator
, we write it lowercase when it is alone, and all uppercase when part of a longer name - if the name is an abbreviation of a longer word, like
id
(fromidentifier
) orsrc
(fromsource
), we write it lowercase when it is alone, and camel case when part of a longer name
Examples:
const url = "x";
const imageURL = "x";
const id = "x";
const imageId = "x";
const src = "x";
const imgSrc = "x";
Images in React components
Images are in a /img subfolder, has size suffix in its name, and imported into React component as a constant with image type suffix (Png, Svg, Jpg, ...).
// bad
import organization from "./organization.png";
import phone from "../../common/phone.svg";
// good
import organizationPng from "./img/organization-24x24.png";
import phoneSvg from "./img/phone.svg";
React event handler naming
The handler functions should be named of the form handle, for example handleClick or handleStart. When sent as props to a component, the property-keys should be named of the form on, for example onClick or onStart. example:
const Activator: FC<ActivatorProps> = (props) => {
return <button onClick={this.props.onActivation}>Activate</button>;
};
const Thing: FC<ThingProps> = (props) => {
const [isActive, setActive] = useState(false);
function handleActivation() {
setActive(true);
}
return (
<div>
Thing is {isActive ? "Active" : "Inactive"}
<Activator onActivation={handleActivation} />
</div>
);
};
Files and folders naming conventions
Project structure is driven by LIFT Principle. Folder structure is organized with approach “folders-by-feature”, not “folders-by-type”
/save-file-dialog
|-- save-file-dialog.helpers.ts
|-- save-file-dialog.helpers.spec.ts
|-- save-file-dialog.tsx
Test file has the same name, as the tested unit, with “.spec.ts” suffix. Test file is in the same folder as the tested code.
/save-file-dialog
|-- save-file-dialog.helpers.ts
|-- save-file-dialog.helpers.spec.ts
Images are in the /img sub-folder of the component, in folder.
/button
|-- /img
| |-- icon-24x24.png
|
|-- button.tsx
Renaming/moving files
NEVER EVER rename a file, by just changing capitalization. Seriously, NEVER !
$ # BAD - NEVER DO THIS $ mv my-Source-Code-File.js my-source-code-file.js If you desperately need to do it, you have to do it in 3 steps:
# STEP 1 - rename file by adding postfix
$ mv my-Source-Code-File.js my-source-code-file-ex.js
# STEP 2 - wait until change spreads into all open branches - this may take several weeks
# STEP 3 - rename file by removing postfix
$ mv my-source-code-file-ex.js my-source-code-file.js
GIT Renaming and/or moving files
To help git track changed files, never rename a file and change its content in one commit.
# BAD
$ mv my-file.ts my-changed-name.ts
# change content of my-changed-name.ts file
$ git commit
# GOOD
$ mv my-file.ts my-changed-name.ts
$ git commit
# change content of my-changed-name.ts file
$ git commit
8 months ago
8 months ago
2 years ago
3 years ago
3 years ago