Blue Flag linting configurations
Installation
npm install eslint-config-blueflag
// .eslintrc "extends": "eslint-config-blueflag" "eslint-config-blueflag/flow.js" // With flow types
Global linters (Sublime Linter)
If your linter can't handle using the current directory to find binaries you will need to install the plugins globally. Make sure you install eslint 2.4.0 though. The babel parser is having issues with later versions.
# Defaults # eslint@2.4.0 # eslint-plugin-react # # Flow Types # eslint-plugin-flow-vars # eslint-plugin-flowtype # one liner npm install -g eslint@2.4.0 eslint-plugin-flow-vars eslint-plugin-flowtype eslint-plugin-react@5.2.0 babel-eslint
Style Guide
JSX
Return JSX elements directly
// Goodreturn <ul ="List"> <li>list items</li> <li>list items</li></ul>; // Badreturn <ul ="List"> <li>list items</li> <li>list items</li> </ul>;
Find and replace
Find: return(\s+?)\((\s+?)<
Automatic find and replaces are hard for this. You can replace return(\s+?)\((\s+?)<
with return <
, find the closing );
and replace it with ;
and de-indent all lines between.
Use self-closing tags for elements without children
// Goodreturn <span />; // Badreturn <span></span>;
Multiple line components should have each prop on a new line, indented once
// Goodreturn <ExampleComponent ="Example" ="Robert"> <p>Child elements</p></ExampleComponent>; return <ExampleComponent ="Example" ="Robert"/> // Badreturn <ExampleComponent ="Example" ="Hello"> <p>Child elements</p></ExampleComponent>; return <ExampleComponent ="Example" ="Hello"> <p>Child elements</p></ExampleComponent>;
Find and replace
Find: \s+?$\s+?(/?>;?)(\s*?)
Replace: $1\n
and then fix up indentation
JS
Chains of functions should be indented by 4 spaces
// Goodreturn ; // Badreturn ; return ;
Named imports should not have spaces between braces and words
// Goodimport React Component Children from 'react'; // Badimport React Component Children from 'react';
Naming
- Never pluralize.
Filenames should use TitleCase
// GoodButtonjsxCreateRoutesjs // BadbuttonjsxcreateRoutesjs
Folders should always be camelCase
// Goodsrc/users/src/learningPlan/ // Badsrc/Users/src/learning_plan/
Route paths should be kebab-case
// Goodhttp://example.com/free-hugs // Badhttp://example.com/freeHugshttp://example.com/free_hugs
SEGMENT_NOUN_VERB
Action Names should follow Underscores are reserved for the division of concept not word spaces
// GoodCOURSE_ASSIGNEE_CHANGECOURSE_DEFAULTASSIGNEE_CHANGE // BadCOURSECHANGECHANGE_COURSE_DEFAULT_ASSIGNEECHANGE_COURSEcourseChange
Action Creators should be lowerCamelCase of ActionName
// Good COURSE_ASSIGNEE_CHANGE // Bad COURSE_ASSIGNEE_CHANGE
Errors
"Expected string but got object"
Often caused by a require()
requiring a file that's using export default
. Ensure all require()
s of components with export default
use import
instead.
"inst.render is not a function"
In React <0.15 this can happen when functional components try to return null. They must return an empty <span/>
instead. This has been fixed as of React 0.15