├── tooling ├── tooling.png └── README.md ├── images └── pyramid_of_doom.png ├── .editorconfig ├── linters ├── .eslintrc.yaml ├── example.js └── README.md ├── LICENSE └── README.md /tooling/tooling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cvut/javascript/HEAD/tooling/tooling.png -------------------------------------------------------------------------------- /images/pyramid_of_doom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cvut/javascript/HEAD/images/pyramid_of_doom.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | -------------------------------------------------------------------------------- /linters/.eslintrc.yaml: -------------------------------------------------------------------------------- 1 | --- 2 | extends: [standard] 3 | env: 4 | browser: true 5 | node: true 6 | es6: true 7 | ecmaFeatures: 8 | modules: true 9 | rules: 10 | camelcase: [2] 11 | no-var: [1] 12 | prefer-const: [1] 13 | comma-dangle: [2, always-multiline] 14 | curly: [2, all] 15 | max-len: [2, 120, 2] 16 | no-extra-bind: [2] 17 | max-len: [2, 100, 2, {ignoreComments: true, ignoreUrls: true}] 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2014 Nicolas Bevacqua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /linters/example.js: -------------------------------------------------------------------------------- 1 | // 'use strict' not enforced 2 | // enable 3 | 4 | // error: 5 | // camelcase 6 | // space-before-function-paren 7 | function lorem_ipsum(arg) { 8 | // do stuff 9 | } 10 | lorem_ipsum() 11 | 12 | // error: 13 | // brace-style 14 | // space-after-keywords 15 | if(true) 16 | { 17 | //do something 18 | } 19 | else { 20 | // do something else 21 | } 22 | 23 | // error: semi 24 | 1; 25 | 26 | // error: comma-spacing 27 | const commaSpacing = ['foo','bar'] 28 | commaSpacing 29 | 30 | // warning: no-var 31 | var myVar 32 | myVar 33 | 34 | // warning: prefer-const 35 | let shouldBeConst = 5 36 | shouldBeConst 37 | 38 | // error: no-array-constructor 39 | Array(0, 1, 2) 40 | // this is okay 41 | const arrayConst = new Array(50) 42 | arrayConst 43 | 44 | // error: eqeqeq 45 | arrayConst == myVar 46 | // this is okay 47 | myVar == null 48 | 49 | // error: comma-dangle (always-multiline) 50 | const commaDangle = { 51 | bar: 'baz', 52 | qux: 'quux' 53 | } 54 | commaDangle 55 | // this is okay 56 | const singleLineNoComma = [1, 2] 57 | singleLineNoComma 58 | 59 | // error: comma-style 60 | const commaStyle = ['apples' 61 | , 'oranges'] 62 | commaStyle 63 | -------------------------------------------------------------------------------- /linters/README.md: -------------------------------------------------------------------------------- 1 | # ESLint Configuration for CTU 2 | 3 | This is a recommended linter configuration for JavaScript projects based on [Standard](https://github.com/feross/standard) with extra rules per [our guidelines](https://github.com/cvut/javascript). 4 | 5 | ## Usage 6 | 7 | Place [`.eslintrc.yaml`](.eslintrc.yaml) file to your project directory. 8 | 9 | You will need the following packages: 10 | 11 | * [eslint](http://eslint.org/) 12 | * [eslint-config-standard](https://github.com/feross/eslint-config-standard) for basic Standard style configuration 13 | 14 | You can install all of these as development dependencies: 15 | 16 | ``` 17 | npm install --save-dev eslint eslint-config-standard 18 | ``` 19 | 20 | ### Rules Override 21 | 22 | Modify the rules to suit your project. For example, if you have a Node-only project, you may want to remove `browser: true` from `env`. 23 | 24 | You can also override the rules per-file with special comments. For example you may want to specify environment for worker script in only one file: 25 | 26 | ```js 27 | /*eslint-env worker */ 28 | ``` 29 | 30 | Or you may have some custom globals: 31 | 32 | ```js 33 | /*global var1, var2*/ 34 | ``` 35 | 36 | [Learn more about ESLint configuration](http://eslint.org/docs/user-guide/configuring). 37 | 38 | ### React/JSX Projects 39 | 40 | For projects using React and/or [JSX](https://facebook.github.io/jsx/) syntax use [standard-react](https://github.com/feross/eslint-config-standard-react). 41 | 42 | You will need these dependencies (in addition to those above): 43 | 44 | * [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) for React-specific rules. 45 | * [eslint-config-standard-react](https://github.com/feross/eslint-config-standard-react) for React-specific configuration. 46 | 47 | Install everything as development dependency: 48 | 49 | ``` 50 | npm install --save-dev eslint eslint-config-standard eslint-config-standard-react eslint-plugin-react 51 | ``` 52 | 53 | In your `.eslintrc.yaml` file just add `standard-react` to the `extends` property, e.g.: 54 | 55 | ```yaml 56 | --- 57 | extends: [standard, standard-react] 58 | # rest of the file is the same… 59 | ``` 60 | 61 | ## Editor Integration 62 | 63 | You will get the most of linting by integrating ESLint to your text editor or IDE. See [the list of integrations](http://eslint.org/docs/user-guide/integrations). 64 | 65 | ## Resources 66 | 67 | * [Linting JavaScript in 2015](http://blog.lauritz.me/linting-javascript-in-2015/) 68 | -------------------------------------------------------------------------------- /tooling/README.md: -------------------------------------------------------------------------------- 1 | # Tooling Recommendations for JavaScript Projects 2 | 3 | This is an overview of tools you may use in your project and (rather opinionated) guide to choosing the right set of options. 4 | 5 | ## tl;dr 6 | 7 | - [Use Yarn and/or npm for packaging](#package-managers), avoid Bower. 8 | - [Use Browserify](#module-bundlers) or Webpack to bundle your modules. 9 | - [Use npm and simple scripts for task automation](#build-tools). Avoid Grunt, Gulp et al. 10 | - [Transpile your code from ES2016 with Babel](#transpilers). Avoid opinionated languages like CoffeeScript. 11 | - [Consider type checking in your project](#type-checking). 12 | - [Save your time with live reloading](#live-reloading). 13 | - [Minify your code with UglifyJS](#minification) through bundler of your choice. 14 | - [Use ESLint for linting](#linters). 15 | - [Test with Tape](#testing) to keep things simple. 16 | - [Take advantage of hosted services](#hosted-services) if your project is open-source. 17 | 18 | ![It Is Dangerous To Go Alone, Take One Of These](tooling.png) 19 | 20 | ## Package Managers 21 | 22 | When it comes to package management in JavaScript, there is [npm](https://www.npmjs.com/) (which [_isn’t_ an acronym for “node package manager”](https://web.archive.org/web/20151125135410/https://docs.npmjs.com/misc/faq#if-npm-is-an-acronym-why-is-it-never-capitalized)) and then there are others. You will use npm to install all Node-based tools, including other package managers. However, it is perfectly okay to use npm for front-end dependencies (i.e. for browsers) – it is even [officially endorsed](http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging). 23 | 24 | npm packages are “[CommonJS modules](https://nodejs.org/docs/latest/api/modules.html):” every module _requires_ dependencies and _exports_ stuff to be consumed by other modules. Thus your code has an obvious [dependency graph](https://en.wikipedia.org/wiki/Dependency_graph) and you don't need to pollute global namespace with your functions. The only disadvantage of npm is that you need to _bundle_ your modules to be consumed by browsers, even while you are developing the application. There are more details [in separate section](#module-bundlers). 25 | 26 | ### Consider Yarn 27 | 28 | [Yarn](https://yarnpkg.com/) is a new dependency manager originally started by Facebook. The awesome thing about Yarn is full compatibility with npm. It works with `package.json` and it downloads all the npm packages you need. In addition, it has also following advantages: 29 | 30 | - It is very fast, 31 | - It has nicer CLI (for example `yarn add` works like `npm install --save`, saving you a few keystrokes), 32 | - It manages a lockfile (`yarn.lock`) for reliable and deterministic dependency management. 33 | 34 | [The `yarn.lock` file](https://yarnpkg.com/en/docs/yarn-lock) contains exact version and checksum of installed packages. This way the whole team has the exact same versions of dependencies and the deployments are safer. 35 | 36 | You will likely use npm for global package installation or for `npm run`; these functions are supported by Yarn but may behave a bit differently. However, for project-level package management **Yarn is strongly recommended**. 37 | 38 | ### Avoid Bower 39 | 40 | Another popular package manager specifically for front-end projects is [Bower](http://bower.io/). It is strictly a dependency manager: it will just download your dependencies to `bower_components` directory and the rest is up to you; usually you will place `