Giter VIP home page Giter VIP logo

mobify-code-style's Introduction

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

mobify-code-style's People

Contributors

aaani avatar aliciawoodside avatar bendvc avatar benlast avatar cdok avatar dnerdy avatar ellekasai avatar haroldtreen avatar jamesbull avatar jansepar avatar jeffkamo avatar jeremywiebe avatar johnboxall avatar jvoll avatar kerrmarin avatar kpeatt avatar lizcross avatar mikeklemarewski avatar roadsideseb avatar ry5n avatar scalvert avatar ssang avatar tedtate avatar vmarta avatar yourpalsonja avatar zacharyhalvorson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.