Git Product home page Git Product logo

javascript's Introduction

godaddy-style

Official GoDaddy JavaScript styleguide. It includes eslint packages for various use-cases and can be used as a standard in any new project.

There are many useful features:

  • Standard. No configuration. – Stop worrying about style and focus on your work.
  • Modern – Uses modern linting tools like eslint.
  • Auto-fix – Auto-fix is enabled by-default through in eslint. Many rules will fix themselves!

This styleguide is used by dozens of product teams at GoDaddy. Have a question or comment? Open an issue!

Installation

Install one of the provided packages depending on the kind of application you are developing:

# Default with ES6
npm i eslint-config-godaddy --save-dev

# OR (ES6 with React rules)
npm i eslint-config-godaddy-react --save-dev

# OR (legacy ES5 with React rules)
npm i eslint-config-godaddy-es5 --save-dev

# OR (ES6 with TypeScript rules)
npm i eslint-config-godaddy-typescript --save-dev

# OR (ES6 with React and TypeScript rules)
npm i eslint-config-godaddy-react-typescript --save-dev

# OR (ES6 with Flow rules)
npm i eslint-config-godaddy-flow --save-dev

# OR (ES6 with React and Flow rules)
npm i eslint-config-godaddy-react-flow --save-dev

Usage

There are two ways to use this styleguide depending on your own tooling preference: directly using pre-included binaries or running eslint yourself with a custom .eslintrc config.

1. Use the pre-included binaries

These use exactly the configuration defined in the individual eslint-config-godaddy* package with auto-fix enabled automatically.

{
  "scripts": {
    "lint": "eslint-godaddy files/ you/ want-to/ lint/"
  }
}

2. Define your local .eslintrc.js and run eslint yourself

module.exports = {
  extends: 'godaddy',
  rules: {
    //
    // Put any rules you wish to override here.
    //
  }
}

The --fix option in eslint is only available as a CLI option. Auto-fix will NOT be enabled unless you run eslint --fix in your package.json.

{
  "scripts": {
    "lint": "eslint --fix files/ you/ want-to/ lint/"
  }
}

Additional Best Practices

This section is a place for additional best practices that may be useful but are not strictly enforced by this styleguide. Have something to add here? Great! Submit a PR.

React

FAQ

How do I override a specific rule ?

1. Add a .eslintrc file at the root of your project:

{
  "extends": "godaddy",
  "rules": {
    // Disable the 'max-params' rule
    "max-params": 0
  }
}

2. Add a param to specify the path of your own .eslintrc file in your package.json

{
  "scripts": {
    "eslint": "eslint-godaddy -c .eslintrc lib/ test/",
  }
}

How do I disable auto fix

You may wish to disable auto fix so when you run eslint in ci it will error if it catches anything unlinted.

{
  "scripts": {
    "eslint:ci": "eslint-godaddy --fix=false --max-warnings=0 lib/ test/",
  }
}

How do I contribute?

Fork this repository and submit a pull request.

Local setup

For a first time setup make sure to run from the root of the monorepo

npm install

Since this repository uses npm workspaces it will install and hoist all node_modules to the root of the monorepo.

Submit a changeset

This repository utilizes changesets to handle versioning and publishing as you submit a pull-request. A changeset should be included with your pull-request to help the maintainers understand the changes and to help with the release process.

To initiate a changeset run:

npm run changeset

After which follow the command prompts to select which packages and which version each package should receive.

Commit and push the changeset to your branch to be included with your pull-request.

Publishing

When a pull-request is merged into the main, the changeset will be used to determine the next version of the package.

A "Version Packages" pull-request will be automatically created to bump the versions. If multiple PRs with changesets are merged, this PR will automatically update to include all changesets.

When all changes are ready to be published, repo admins can force squash merge the "Version Packages" PR to main (CI worflows do not run on this automated branch). This will trigger the CI to publish the packages to npm.

I disagree with a specific rule

Great. We'd love to talk about it. Fork this repository and submit a pull-request.

Help! It's not working for me

No problem. Reach out to us by opening an issue

Roadmap

  • ESLint v9 support (guide)

javascript's People

Contributors

3rd-eden avatar agerard-godaddy avatar ahilton-godaddy avatar andyfleming avatar dependabot[bot] avatar dusave avatar fabiomcosta avatar gingur avatar gisenberg avatar github-actions[bot] avatar gshively11 avatar gzurbach avatar indexzero avatar josephjunker avatar jpage-godaddy avatar kawikabader avatar kbader-godaddy avatar mmason2-godaddy avatar mpaulucci-godaddy avatar msluther avatar rbenedum-godaddy avatar rmarkins-godaddy avatar rxmarbles avatar samshull avatar smehta-godaddy avatar swaagie avatar tkennedy1-godaddy avatar yhan-godaddy avatar yhan64 avatar yungcheng 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

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

javascript's Issues

Consider including common eslint-plugin-react rules

From recommended rules the package itself exports:

    "react/display-name": 2,
    "react/jsx-no-duplicate-props": 2,
    "react/jsx-no-undef": 2,
    "react/jsx-uses-react": 2,
    "react/no-danger": 2,
    "react/no-deprecated": 2,
    "react/no-did-mount-set-state": [2, "allow-in-func"],
    "react/no-did-update-set-state": [2, "allow-in-func"],
    "react/no-direct-mutation-state": 2,
    "react/no-is-mounted": 2,
    "react/no-unknown-property": 2,
    "react/prop-types": 2,
    "react/react-in-jsx-scope": 2,

Does not run with eslint 2.3.0

A bug was introduced in the latest version of eslint (2.3.0), preventing us from running the style guide.

Running eslint with options: -c godaddy-style/dist/.eslintrc server common test
Error: Cannot find module 'estraverse-fb'

See issue: eslint/eslint#5476

I'm sure this issue will be fixed in a couple days, but I wonder whether it would be wise to lock the dependencies in the package.json (i.e. change "eslint": "^2.1.0" to "eslint": "2.2.0").

I tend to run into less issues when controlling which versions I'm using. Just a suggestion :)

Fundamentally opposing rules for ES6

I noticed that there is a situation in ES6 where properties of an object literal are declared without the function keyword and because object keys are not allowed to have space afterwards, but opening round braces are not permitted to NOT have whitespace before, there is a situation created that causes issues with autofix and cannot be resolved manually either.

https://github.com/godaddy/javascript/blob/master/dotfiles/.jscsrc#L279
https://github.com/godaddy/javascript/blob/master/dotfiles/.jscsrc#L70

eslint-godaddy-react fails to run on Windows.

Minimal repro here: https://github.com/gisenberg/eslint-godaddy-react-repro
node: v6.0.0
npm: v3.8.6

When running eslint-godaddy-react on Windows, the script execution fails. Example output below:

gdlint:

C:\Users\gisenberg\git\eslint-godaddy-react-repro (master) ([email protected])
λ npm run gdlint

> [email protected] gdlint C:\Users\gisenberg\git\eslint-godaddy-react-repro
> eslint-godaddy-react src/

C:\Users\gisenberg\git\eslint-godaddy-react-repro\node_modules\.bin\eslint.CMD:1
(function (exports, require, module, __filename, __dirname) { @IF EXIST "%~dp0\node.exe" (

SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:511:25)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at C:\Users\gisenberg\git\eslint-godaddy-react-repro\node_modules\eslint-config-godaddy\cli.js:41:7
    at C:\Users\gisenberg\git\eslint-godaddy-react-repro\node_modules\which\which.js:87:20

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gdlint"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] gdlint: `eslint-godaddy-react src/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gdlint script 'eslint-godaddy-react src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the eslint-godaddy-react-repro package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint-godaddy-react src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs eslint-godaddy-react-repro
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls eslint-godaddy-react-repro
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\gisenberg\git\eslint-godaddy-react-repro\npm-debug.log

eslint:

C:\Users\gisenberg\git\eslint-godaddy-react-repro (master) ([email protected])
λ npm run eslint

> [email protected] eslint C:\Users\gisenberg\git\eslint-godaddy-react-repro
> eslint src/

C:\Users\gisenberg\git\eslint-godaddy-react-repro (master) ([email protected])
λ

JSCS end of support

Hi all,

The JSCS team announced a couple months ago that they are not maintaining their project anymore (see https://medium.com/@markelog/jscs-end-of-the-line-bc9bf0b3fdb2):

We came to the realization that ESLint and JSCS are really solving the same set of problems in very similar ways. The community seems to want to use a single linter, and we want to help that become a reality.

Therefore I am wondering if it still makes sense to have an abstraction layer for those two linting tools?

As an API developer writing code in Node only, I ran into several issues using this package:

  • It is not possible to override specific rules (in fact it works but "by accident" - see #25): one size does not fit all! Some frameworks such as Loopback impose us to have methods with 5+ params all over, but the GoDaddy ESLint complains.
  • It was made by and for React developers: several linting rules and eslint plugins included in this project are only useful for React/JSX folks. This default configuration makes it difficult for Node users to use this project.
  • It cannot be used on Jenkins: ESLint options to change the output format or to configure the output file cannot be passed via fashion-show (see #28).

Since JSCS is now deprecated, I wonder if this project should simply contain the following:

  1. A base ESLint configuration file for all GoDaddy teams
  2. A base ESLint configuration file for React developers

That way the entire company could use it and align on a base style. Each team would install ESLint directly in their project (locally or globally). Each project would extend the base ESLint configuration files such as:

{
  "extends": "./node_modules/godaddy-js-style-guide/.eslintrc-base",
  "globals": {
    "myProjectGlobal": true
  },
  "rules": {
    "max-params": 0, // because I <3 params!
  }
}

Just my $0.02, cheers! :)

Disable JSCS auto-fix?

We have the following npm script in our package.json:

"scripts": {
  "lint_local": "godaddy-js-style-eslint -c .eslintrc server common test && godaddy-js-style-jscs server common test",
  "lint_jenkins": "godaddy-js-style-eslint -c .eslintrc -f checkstyle server common test -o checkstyle-eslint.xml && godaddy-js-style-jscs -r checkstyle server common test > checkstyle-jscs.xml"
}

In Jenkins, we run npm run lint_jenkins. We expect that checkstyle-eslint.xml and checkstyle-jscs.xml will be reporting style issues. But instead because --fix is set by default by godaddy-js-style-jscs, our source files get fixed during the build. This is not the desired behavior.

Would you guys accept a PR adding an option to disable auto-fix? I'm not sure how it would play with fashion-show (might be tricky). The change would be backward-compatible, and would allow us to stop our build if the style guide is not respected.

4.0.0 fails to install

npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] postinstall: `run-p install:config install:config:es5 install:config:react`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'run-p install:config install:config:es5 install:config:react'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the godaddy-style package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     run-p install:config install:config:es5 install:config:react
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs godaddy-style
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls godaddy-style
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/V1/Projects/ux/svgs/npm-debug.log

The run-p command does not exist on my system so it fails to install .

Running any of the scripts fails in event.js:85

I have attempted to follow the directions for adding it to our project, but running any of the commands with npm run <script> results in

events.js:85
      throw er; // Unhandled 'error' event
            ^

I assume that events.js is from one of the node_modules that this depends on because we do not have an events.js file in our code. I changed the lib/ to src/ in the script command because we don't have a lib folder, and got the same behavior. npm error information looks like this:

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! <our package name>@1.0.0 lint: `godaddy-js-style-lint src/ test/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <our package name>@1.0.0 lint script 'godaddy-js-style-lint src/ test/'.
npm ERR! This is most likely a problem with the <our package name> package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     godaddy-js-style-lint src/ test/

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.