8000
Skip to content
This repository was archived by the owner on Aug 8, 2023. It is now read-only.

mobify/mobify-code-style

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

761 Commits
.github
.github
 
 
assets
assets
 
 
copyright
copyright
 
 
css
css
 
 
docs
docs
 
 
es5
es5
 
 
es6
es6
 
 
github-templates
github-templates
 
 
html
html
 
 
java
java
 
 
javascript
javascript
 
 
python
python
 
 
scripts
scripts
 
 
swift
swift
 
 
.gitignore
.gitignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
RELEASE.md
RELEASE.md
 
 
circle.yml
circle.yml
 
 
package.json
package.json
 
 

Repository files navigation

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

About

📚 Mobify's coding style and standards!

Topics

linting linting-rules

Resources

Readme
Activity
Custom properties

Stars

115 stars

Watchers

88 watching

Forks

18 forks
Report repository

Releases 37

2.8.5 Latest
May 29, 2019
+ 36 releases

Packages

 
 
 

Contributors

Languages

0