Skip to content
πŸ“š Mobify's coding style and standards!
Python JavaScript Shell TypeScript
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
assets
copyright
css Add link to CSSComb extension for VS Code May 3, 2018
docs
es5
es6
github-templates
html
java
javascript
python Python docstring format recommendation Feb 2, 2017
scripts
swift Remove example definition Nov 29, 2016
.gitignore
CHANGELOG.md
README.md
RELEASE.md
circle.yml
package.json

README.md

Mobify Code Style

A repo to document code standards for different languages and provide tools for linting Mobify projects.

NPM version CircleCI

JavaScript (ES5) with Grunt

Typically, we lint our javascript files using Grunt and grunt-eslint. grunt-eslint is a Grunt helper for the ESLint linter.

To add javascript linting to your project:

  1. Install the NPM mobify-code-style and grunt-eslint modules.
  2. Create a Gruntfile if you don't have one already.
  3. Create an .eslintrc.yml file in the root of your project directory
  4. In the initConfig of your gruntfile, add a section for eslint pointing to the correct linting file.

The .eslintrc.yml file should contain, to begin with:

extends:
  - './node_modules/mobify-code-style/es5/mobify-es5.yml'

Sample eslint Grunt config:

eslint:{
    dev: {
        src: ['src/**/*.js'],
        options: {
            // When true, eslint will test _only_ the rules set in the provided
            // configuration file
            reset: false,
            configFile: './.eslintrc.yml'
        }
    }
}

Migrating from ESLint 0.x or 1.x to ESlint 2.x or 3.x

If you upgrade the version of grunt-eslint you use from one that pulls in ESLint 1.x or lower to one that pulls in ESLint 2.x or greater, you must modify the configuration files to include the new style of configuration.

If the Grunt config includes the default config ./node_modules/mobify-code-style/javascript/.eslintrc, replace that with ./.eslintrc.yml, and add an .eslintrc.yml to the project root as described above.

If there are modifications to the lint configuration in the project, please check the migration guides at eslint.org to port the modified lint config to ESLint 3.x.

ES6/JSX

We use ESLint to lint ES6 and React/JSX code. If ESLint is installed in a project, we can use the configuration from this module by creating a file in the project root named .eslintrc.yml. If the project does not use JSX, the file contents should be

extends:
  - './node_modules/mobify-code-style/es6/mobify-es6.yml'

and for a React/JSX project:

extends:
  - './node_modules/mobify-code-style/es6/mobify-es6-react.yml'

If using a custom Webpack configuration, add the lines:

settings:
  import/resolver:
    webpack:
      config: '<path-to-webpack-config>'

to the .eslintrc.yml

Make sure to install the following NPM modules:

  • eslint > 3.0
  • eslint-plugin-import
  • eslint-import-resolver-webpack
  • eslint-plugin-react (for React/JSX linting only)

ESLint and Atom

Find out how to integrate ESLint and Atom Text.

CSS

Our Client Services team's CSS Style Guide. Written with a lot of tender care by @kpeatt and @jeffkamo.

Python

See the python directory of this repo for a standardized pylintrc file and instructions on using pep8, pylint and pyflakes to check Python code.

Documentation

See the docs directory for setup and configuration of Markdown linting.

Copyright Headers

All Mobify source files should contain copyright headers at the beginning of the file.

See the copyright directory for setup and configuration of the copyright manager tool

You can’t perform that action at this time.