javascript - JavaScript Style Guide

  •        24

Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.1.1 Primitives: When you access a primitive type you work directly on its value.

https://github.com/airbnb/javascript

Tags
Implementation
License
Platform

   




Related Projects

JSXHint - Wrapper around JSHint for linting JSX files

  •    Javascript

JSXHint is, and always was, a bad hack to make JSX lintable in the early days of React. It will always be inferior to proper linters like ESLint because it is not able to lint JSX or ES6 syntax, it instead compiles to ES5 then lints. You may get weird linter errors, especially with more involved transforms. Don't use JSXHint anymore if you can switch to ESLint.

react-pdf-js - A React component to wrap PDF.js

  •    Javascript

react-pdf-js provides a component for rendering PDF documents using PDF.js. Written for React 15/16 and ES2015 using the Airbnb style guide.


css-styleguide - :book: Opinionated CSS styleguide for scalable applications

  •    

This guide was heavily inspired by experiments, awesome people like @fat and @necolas and awesome projects made by Google, Airbnb and Medium. The following are some terms used throughout this styleguide.

react-styleguidist - Isolated React component development environment with a living style guide

  •    Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

lint-staged - 🚫💩 — Run linters on git staged files

  •    Javascript

Linting makes more sense when running before committing your code. By doing that you can ensure no errors are going into repository and enforce code style. But running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed. This project contains a script that will run arbitrary npm and shell tasks with a list of staged files as an argument, filtered by a specified glob pattern.

eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.

  •    Javascript

Static AST checker for accessibility rules on JSX elements. Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

postcss-bem-linter - A BEM linter for postcss

  •    Javascript

A PostCSS plugin to lint BEM-style CSS.BEM-style describes CSS that follows a more-or-less strict set of conventions determining what selectors can be used. Typically, these conventions require that classes begin with the name of the component (or "block") that contains them, and that all characters after the component name follow a specified pattern. Original BEM methodology refers to "blocks", "elements", and "modifiers"; SUIT refers to "components", "descendants", and "modifiers". You might have your own terms for similar concepts.

eslint_d.js - Makes eslint the fastest linter on the planet

  •    Javascript

Makes eslint the fastest linter on the planet.Yes, it's actually super fast. But the node.js startup time and loading all the required modules slows down linting times for a single file to ~700 milliseconds. eslint_d reduces this overhead by running a server in the background. It brings the linting time down to ~160 milliseconds. If you want to lint from within your editor whenever you save a file, eslint_d is for you.

prop-types - Custom React PropType validators that we use at Airbnb.

  •    Javascript

Custom React PropType validators that we use at Airbnb. Use of airbnb-js-shims or the equivalent is recommended.Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

react-redux-styleguide - React / Redux Style Guide

  •    

This is an opinionated style guide for developing applications in ES6+ with React and/or Redux. These styles are based on current best practices in the React and Redux communities, as well as real life experience with these tools in the field. It puts great focus on writing readable and maintainable code and using new JavaScript features in a responsible manner.

ES6-for-humans - A kickstarter guide to writing ES6.

  •    

let allows you to create declarations which are bound to any block, called block scoping. Instead of using var, which provides function scope, it is recommended to use block scoped variables (let or const) in ES6. Arrow functions are a short-hand notation for writing functions in ES6. The arrow function definition consists of a parameter list ( ... ), followed by the => marker and a function body. For single-argument functions, the parentheses may be omitted.

eslint-plugin-import - ESLint plugin with rules that help validate proper imports.

  •    Javascript

This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor. IF YOU ARE USING THIS WITH SUBLIME: see the bottom section for important info.

swift - Airbnb's Swift Style Guide.

  •    Shell

Note that brevity is not a primary goal. Code should be made more concise only if other good code qualities (such as readability, simplicity, and clarity) remain equal or are improved. You can enable the following settings in Xcode by running this script, e.g. as part of a "Run Script" build phase.

esprint - Fast eslint runner

  •    Javascript

esprint (pronounced E-S-sprint) speeds up eslint by running the linting engine across multiple threads. esprint sets up a server daemon to cache the lint status of each file in memory. It uses a watcher to determine when files change, to only lint files as necessary. It also has a CI mode where it does not set up a daemon and just lints in parallel. esprint will find the root of your project automatically and lint the whole project. In default mode, esprint will start a background server to watch source files and cache lint results in memory.