{"id":23338236,"url":"https://github.com/bitcrowd/javascript","last_synced_at":"2025-04-09T22:30:54.036Z","repository":{"id":54849861,"uuid":"65891645","full_name":"bitcrowd/javascript","owner":"bitcrowd","description":"Bitcrowd JavaScript Guide","archived":false,"fork":false,"pushed_at":"2021-01-25T14:59:27.000Z","size":25,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-03T15:02:15.062Z","etag":null,"topics":["guide","javascript","linting","metrics","testing"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitcrowd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-17T08:49:22.000Z","updated_at":"2022-01-08T23:42:32.000Z","dependencies_parsed_at":"2022-08-14T04:40:49.639Z","dependency_job_id":null,"html_url":"https://github.com/bitcrowd/javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcrowd%2Fjavascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcrowd%2Fjavascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcrowd%2Fjavascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitcrowd%2Fjavascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitcrowd","download_url":"https://codeload.github.com/bitcrowd/javascript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248123279,"owners_count":21051434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["guide","javascript","linting","metrics","testing"],"created_at":"2024-12-21T03:12:51.114Z","updated_at":"2025-04-09T22:30:53.958Z","avatar_url":"https://github.com/bitcrowd.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bitcrowd JavaScript Guide\n\nApart from our development processes and practices, we are employing additional\nmethods for ensuring high code quality:\n\n1. *Automated Code Formatting* \u0026 *Linting* ensure that code is written in a\n   consistent style and conforms to pre-defined standards.\n2. *Tests* are useful as a design tool, for documenting your code and making\n   sure it works correctly. Good tests allow you to change your code's\n   structure without breaking its behaviour, during refactorings for instance.\n3. *Metrics* help you understand how code changes affect various measurable\n   characteristics of your code.\n\nTool-support has gotten pretty good, so all of these are rather quick to set\nup. Where possible checks should be automated and have shareable configs.\n\n## Automated Code Formatting\n\nAt a very basic level, adding an [EditorConfig file](https://editorconfig.org/) in your project helps keeping code formatting consistent ([example](templates/.editorconfig)). Many editors already natively support EditorConfig, for others there are [plugins](https://editorconfig.org/#download).\n\n[Prettier](https://github.com/prettier/prettier) is a tool to automatically\nformat source code. It can be integrated into your Git workflow and editor.\n\nNote that [using Prettier does not make linting obsolete](https://github.com/prettier/prettier#how-does-it-compare-to-eslint-or-tslint-stylelint). Prettier corrects code *formatting* issues but does not warn about code *quality* problems detected by many linting rules.\n\n## ESLint Configuration\n\nOur standard ESLint configuration follows that of [Airbnb](https://github.com/airbnb/javascript) and integrates [Prettier](https://prettier.io/docs/en/eslint.html).\n\nThe Airbnb configuration comes in different flavours:\n\n1. a [base configuration](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)\n   for ECMAScript 6+ code (and a legacy version for ES5 and below)\n2. a [react configuration](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)\n   for ES6+ linting with additional rules for React applications\n\nInstall the packages which fit your current project and create an `.eslintrc.json`\nfile ([example](templates/.eslintrc.json)). We recommend setting\n[`\"root\": true`](https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy)\nso as to avoid system-specific differences in linting behaviour.\n\nNote: If you're working on an Angular(JS) application, consider using\n[eslint-plugin-angular](https://github.com/Gillespie59/eslint-plugin-angular).\n\n### Auto-fixing Linting Issues\n\nSome ESLint rules support automated fixing. To apply fixes, run `eslint` with\nthe [`--fix`](https://eslint.org/docs/user-guide/command-line-interface#--fix)\nflag.\n\n### Directory-specific overrides\n\nIn order to adapt the ESLint configuration for parts of the project tree,\nyou can drop additional `.eslintrc` files into into specific subdirectories.\n\nESLint will pick up these file in addition to the one in the project root via\n[configuration cascading](http://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy).\n\n### Ignoring files\n\nYou will likely want to prevent ESLint from scanning certain files, e.g. node modules and application bundles. To do so, you can either create an [`.eslintignore`](https://eslint.org/docs/user-guide/configuring#eslintignore) file or [use your `.gitignore`](https://eslint.org/docs/user-guide/configuring#using-an-alternate-file):\n\n```shell\neslint --ignore-path .gitignore .\n```\n\n### Including files\n\nIf you are using file extensions other than `.js` for files that need to be linted, e.g. `.jsx`, be sure to [specify them via the command line](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint):\n\n```shell\neslint --ext .js,.jsx .\n```\n\n## Testing\n\nYour code should have tests.\n\nWe're mostly using [Jest](https://github.com/facebook/jest) which should look rather familiar if you've used RSpec or any other behavior-driven development framework before.\n\nWhen you're testing React code, use [Enzyme](https://github.com/airbnb/enzyme).\n\nIf you ever need a headless DOM in Node.js take a look at\n[jsdom](https://github.com/tmpvar/jsdom).\n\nFor a usage sample of Jest, Enzyme and jsdom, you can head over to the\nTickety Tick [repo](https://github.com/bitcrowd/tickety-tick).\n\n## Metrics\n\nWhile *code metrics* should always be taken with a grain of salt, they can\nprovide rather useful insights into how code changes affect code quality.\n\nSuch metrics may be derived from *static analysis* of the source code or even\ndescribe *runtime characteristics* of the software.\n\nA metric we may want to use more often is *code coverage*. Jest has support for [measuring code coverage](https://jestjs.io/docs/en/cli#coverage) out of the box. For an example project that uses Jest to measure coverage take a look at [Tickety Tick](https://github.com/bitcrowd/tickety-tick).\n\nThere a services that allow you to push coverage information, create project\nbadges and keep a \"coverage history\" for additional insights. They can be\nintegrated into continuous integration tools and services (e.g. Travis CI).\nTwo popular services are: [coveralls.io](https://coveralls.io/) and\n[codecov.io](https://codecov.io/).\n\n\u003c!-- TODO: Add notes on benchmarking? --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitcrowd%2Fjavascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitcrowd%2Fjavascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitcrowd%2Fjavascript/lists"}