What Is a Style Guide?
A style guide explains the standards for the way code should be written and organized. It’s made up of rules about the specific way to write code, from line breaks to spaces and other seemingly minor details. (Looking for an interior design style guide, rather than a programming style guide? Check out this article.)
Why Are Style Guides Necessary?
Every code developer has their own way of writing code, which can become problematic when multiple developers are working on the same codebase. With a style guide, developers new to the codebase can easily learn the correct way to write a specific type of code so that it remains cohesive with what has already been written.
A style guide’s goal is to make code seem like it was written by a single person, regardless of how many developers contributed to it. Essentially, a style guide is written to help new developers quickly become comfortable with the codebase so that they can write code that’s simple for other developers to read and understand.
What Is the Airbnb Style Guide?
Definitions of Basic Terms in the Airbnb Style Guide
Coding comes with its own language, and when first jumping in, it can be challenging to understand what the Airbnb Style Guide is saying. Here’s a quick overview of some common terms that pop up when discussing the Airbnb Style Guide.
A codebase, sometimes written as code base, is the complete collection of human-created programming source code needed to keep the application functional.
Linting (along with lint and linter) is another common term in programming that isn’t immediately understandable to those who aren’t familiar with it. However, it’s essential to have a basic understanding of linting for people interested in the Airbnb Style Guide.
Basically, a linter is any tool that inspects code and flags various issues or suspicious usage. Linters can be used with software written in any computer language. They look for bugs, typos, and possible mistakes.
There are a couple of advantages to linting. It provides a style guide for programmers to follow, and it also looks for code that may break or not work properly. Linting makes code cleaner and more consistent, even for developers who are working on their own. Of course, linting is even more important when multiple developers are working together because it helps create a style guide that everyone can adhere to.
camelCase and PascalCase
camelCase and PascalCase are naming conventions in programming. camelCase states that each word that makes up a compound word should be capitalized, except for the first word. Meanwhile, PascalCase states all the words’ first letters should be capitalized, including the first word. Since element names can’t contain spaces, camelCase and PascalCase are very useful in programming because they make compound names easy to read.
A config file (short for “configuration file”) is a text file that contains information needed for a program to operate successfully. Config files are editable and are generally structured to be easily configured by users. They allow users to customize the way they interact with the program, or how the program works with the rest of the system. There’s no standard for how config files should look or how they have to work; this is all left up to the program’s developers.
Overview of the Airbnb Style Guide
The official Github Airbnb Style Guide has 39 topics in its table of contents. The first 15 are briefly outlined in a simplified manner below. For all of the details and examples, be sure to check out the original Airbnb Style Guide. The explanations below do not constitute a comprehensive style guide.
1. Basic Rules
Each file should only have one React component, and developers should only use JSX syntax.
2. Class vs React.createClass vs stateless
Internal state and/or refs should use class extends React.Component, rather than React.createClass.
Mixins should not be used as they can add unnecessary complexity to the code.
React components should use the .jsx extension; filenames should use PascalCase. PascalCase should be used to name React components, and camelCase should be used for their instances.
Components should be named by reference.
The following alignment styles should be used in ESLint for JSX syntax: react/jsx-closing-bracket-location and react/jsx-closing-tag-location.
Self-closing tags should only include a single space. JSX curly braces should not be padded with spaces.
Prop names should be written in camelCase.
Ref callbacks should always be used.
When JSX tags span more than one line, they should be wrapped in parentheses.
According to the Airbnb Style Guide, tags that have no children should always be self-closed.
Close over local variables using arrow functions.
The class extends React.Component should use the following order: optional static methods, constructor, getChildContext, componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount, clickHandlers or eventHandlers, getter methods for render, optional render methods, and then render.
Programmers should not use isMounted, as it is an anti-pattern in the process of being officially deprecated.
List Your Vacation Rental Property on RentalTrader
Interested in listing your vacation rental on sites other than Airbnb? RentalTrader is an excellent option that puts cost-effectiveness at the forefront of the business. There are no guest fees, it’s free to sign up and list your property, and hosts only pay a 4.5% fee on each booking. Get your listing seen by more guests and fill up your calendar with additional stays. List your vacation rental on RentalTrader today!