Add Prettier with ESLint integration (ianstormtaylor#1589)

* Add Prettier, with basic config and ESLint integration * Apply Prettier to all files using `yarn lint --fix` * Tell Prettier to ignore an empty text in a test output. * Run Prettier on JS files not handled by ESLint, and lint them too
freeplant · Feb 6, 2018 · 3339d08 · 3339d08
1 parent f28c59a
commit 3339d08
Show file tree

Hide file tree

Showing 637 changed files with 4,435 additions and 4,284 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,8 +1,6 @@
 {
-  "plugins": [
-    "import",
-    "react"
-  ],
+  "extends": ["prettier", "prettier/react"],
+  "plugins": ["import", "react", "prettier"],
   "settings": {
     "import/extensions": [".js"]
   },
@@ -18,38 +16,34 @@
     "node": true
   },
   "rules": {
-    "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }],
-    "arrow-spacing": "error",
-    "block-spacing": "error",
-    "comma-dangle": ["error", "only-multiline"],
-    "comma-spacing": ["error", { "before": false, "after": true }],
-    "comma-style": ["error", "last"],
-    "computed-property-spacing": ["error", "never"],
     "constructor-super": "error",
-    "curly": ["error", "multi-line"],
-    "dot-location": ["error", "property"],
     "dot-notation": ["error", { "allowKeywords": true }],
-    "eol-last": "error",
-    "func-call-spacing": ["error", "never"],
     "import/default": "error",
     "import/export": "error",
     "import/first": "error",
     "import/named": "error",
     "import/namespace": "error",
     "import/newline-after-import": "error",
     "import/no-deprecated": "error",
-    "import/no-extraneous-dependencies": ["error", { "peerDependencies": true }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "peerDependencies": true }
+    ],
     "import/no-mutable-exports": "error",
     "import/no-named-as-default": "error",
     "import/no-named-as-default-member": "error",
     "import/no-unresolved": "error",
-    "indent": ["error", 2, { "SwitchCase": 1, "MemberExpression": 1 }],
-    "jsx-quotes": ["error", "prefer-double"],
-    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
-    "keyword-spacing": ["error", { "before": true, "after": true }],
     "linebreak-style": "error",
-    "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": true, "allowBlockStart": true, "allowObjectStart": true, "allowArrayStart": true }],
-    "new-parens": "error",
+    "lines-around-comment": [
+      "error",
+      {
+        "beforeBlockComment": true,
+        "afterBlockComment": true,
+        "allowBlockStart": true,
+        "allowObjectStart": true,
+        "allowArrayStart": true
+      }
+    ],
     "no-array-constructor": "error",
     "no-class-assign": "error",
     "no-console": "error",
@@ -68,25 +62,36 @@
     "no-func-assign": "error",
     "no-invalid-regexp": "error",
     "no-lonely-if": "error",
-    "no-mixed-spaces-and-tabs": ["error", false],
-    "no-multi-spaces": "error",
-    "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
     "no-native-reassign": "error",
     "no-negated-in-lhs": "error",
     "no-new-object": "error",
     "no-new-symbol": "error",
     "no-path-concat": "error",
     "no-redeclare": "error",
     "no-regex-spaces": "error",
-    "no-restricted-globals": ["error", "Debug", "document", "Document", "event", "history", "History", "length", "Map", "Node", "parent", "Range", "Selection", "Set", "Text"],
+    "no-restricted-globals": [
+      "error",
+      "Debug",
+      "document",
+      "Document",
+      "event",
+      "history",
+      "History",
+      "length",
+      "Map",
+      "Node",
+      "parent",
+      "Range",
+      "Selection",
+      "Set",
+      "Text"
+    ],
     "no-sequences": "error",
     "no-shadow": "error",
     "no-shadow-restricted-names": "error",
-    "no-spaced-func": "error",
     "no-tabs": "error",
     "no-this-before-super": "error",
     "no-throw-literal": "error",
-    "no-trailing-spaces": "error",
     "no-undef": "error",
     "no-unneeded-ternary": "error",
     "no-unreachable": "error",
@@ -100,31 +105,24 @@
     "no-useless-rename": "error",
     "no-var": "error",
     "no-void": "error",
-    "no-whitespace-before-property": "error",
     "no-with": "error",
-    "object-curly-spacing": ["error", "always", { "objectsInObjects": false }],
-    "object-property-newline": ["error", { "allowMultiplePropertiesPerLine": true }],
     "object-shorthand": ["error", "always"],
-    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" }}],
-    "padded-blocks": ["error", { "blocks": "never", "classes": "always" }],
     "prefer-arrow-callback": "error",
-    "prefer-const": ["error", { "destructuring": "all", "ignoreReadBeforeAssign": true }],
+    "prefer-const": [
+      "error",
+      { "destructuring": "all", "ignoreReadBeforeAssign": true }
+    ],
     "prefer-rest-params": "error",
     "prefer-spread": "error",
     "prefer-template": "error",
-    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "prettier/prettier": "error",
     "radix": "error",
     "react/jsx-boolean-value": ["error", "never"],
-    "react/jsx-closing-bracket-location": "error",
-    "react/jsx-curly-spacing": ["error", "never"],
-    "react/jsx-equals-spacing": "error",
-    "react/jsx-first-prop-new-line": ["error", "multiline"],
     "react/jsx-key": "error",
     "react/jsx-no-bind": "error",
     "react/jsx-no-duplicate-props": "error",
     "react/jsx-no-target-blank": "error",
     "react/jsx-no-undef": "error",
-    "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/jsx-wrap-multilines": "error",
@@ -136,19 +134,12 @@
     "react/react-in-jsx-scope": "error",
     "react/self-closing-comp": "error",
     "react/sort-prop-types": "error",
-    "rest-spread-spacing": ["error", "never"],
-    "semi": ["error", "never"],
-    "space-before-blocks": "error",
-    "space-before-function-paren": ["error", { "anonymous": "always", "named": "never" }],
-    "space-in-parens": "error",
-    "space-infix-ops": "error",
-    "space-unary-ops": ["error", { "words": true, "nonwords": false }],
-    "spaced-comment": ["error", "always", { "exceptions": ["-"]}],
-    "template-curly-spacing": "error",
-    "template-tag-spacing": ["error", "never"],
-    "unicode-bom": ["error", "never"],
+    "spaced-comment": ["error", "always", { "exceptions": ["-"] }],
     "use-isnan": "error",
-    "valid-jsdoc": ["error", { "prefer": { "return": "returns" }, "requireReturn": false }],
+    "valid-jsdoc": [
+      "error",
+      { "prefer": { "return": "returns" }, "requireReturn": false }
+    ],
     "valid-typeof": "error",
     "yield-star-spacing": ["error", "after"],
     "yoda": ["error", "never"]

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+examples/build.prod.js
+package.json
+packages/*/dist/
+packages/*/lib/
+tmp/
diff --git a/examples/check-lists/index.js b/examples/check-lists/index.js
@@ -1,4 +1,3 @@
-
 import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
@@ -12,17 +11,16 @@ import initialValue from './value.json'
  */
 
 class CheckListItem extends React.Component {
-
   /**
    * On change, set the new checked value on the block.
    *
    * @param {Event} event
    */
 
-  onChange = (event) => {
+  onChange = event => {
     const checked = event.target.checked
     const { editor, node } = this.props
-    editor.change(c => c.setNodeByKey(node.key, { data: { checked }}))
+    editor.change(c => c.setNodeByKey(node.key, { data: { checked } }))
   }
 
   /**
@@ -42,19 +40,14 @@ class CheckListItem extends React.Component {
         {...attributes}
       >
         <span>
-          <input
-            type="checkbox"
-            checked={checked}
-            onChange={this.onChange}
-          />
+          <input type="checkbox" checked={checked} onChange={this.onChange} />
         </span>
         <span contentEditable suppressContentEditableWarning>
           {children}
         </span>
       </div>
     )
   }
-
 }
 
 /**
@@ -64,15 +57,14 @@ class CheckListItem extends React.Component {
  */
 
 class CheckLists extends React.Component {
-
   /**
    * Deserialize the initial editor value.
    *
    * @type {Object}
    */
 
   state = {
-    value: Value.fromJSON(initialValue)
+    value: Value.fromJSON(initialValue),
   }
 
   /**
@@ -102,11 +94,8 @@ class CheckLists extends React.Component {
   onKeyDown = (event, change) => {
     const { value } = change
 
-    if (
-      event.key == 'Enter' &&
-      value.startBlock.type == 'check-list-item'
-    ) {
-      change.splitBlock().setBlock({ data: { checked: false }})
+    if (event.key == 'Enter' && value.startBlock.type == 'check-list-item') {
+      change.splitBlock().setBlock({ data: { checked: false } })
       return true
     }
 
@@ -151,12 +140,12 @@ class CheckLists extends React.Component {
    * @return {Element}
    */
 
-  renderNode = (props) => {
+  renderNode = props => {
     switch (props.node.type) {
-      case 'check-list-item': return <CheckListItem {...props} />
+      case 'check-list-item':
+        return <CheckListItem {...props} />
     }
   }
-
 }
 
 /**

diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
@@ -1,4 +1,3 @@
-
 import { Editor } from 'slate-react'
 import { Value } from 'slate'
 
@@ -18,7 +17,9 @@ function CodeBlock(props) {
   const language = node.data.get('language')
 
   function onChange(event) {
-    editor.change(c => c.setNodeByKey(node.key, { data: { language: event.target.value }}))
+    editor.change(c =>
+      c.setNodeByKey(node.key, { data: { language: event.target.value } })
+    )
   }
 
   return (
@@ -30,7 +31,7 @@ function CodeBlock(props) {
         contentEditable={false}
         style={{ position: 'absolute', top: '5px', right: '5px' }}
       >
-        <select value={language} onChange={onChange} >
+        <select value={language} onChange={onChange}>
           <option value="css">CSS</option>
           <option value="js">JavaScript</option>
           <option value="html">HTML</option>
@@ -41,9 +42,7 @@ function CodeBlock(props) {
 }
 
 function CodeBlockLine(props) {
-  return (
-    <div {...props.attributes}>{props.children}</div>
-  )
+  return <div {...props.attributes}>{props.children}</div>
 }
 
 /**
@@ -53,15 +52,14 @@ function CodeBlockLine(props) {
  */
 
 class CodeHighlighting extends React.Component {
-
   /**
    * Deserialize the raw initial value.
    *
    * @type {Object}
    */
 
   state = {
-    value: Value.fromJSON(initialValue)
+    value: Value.fromJSON(initialValue),
   }
 
   /**
@@ -121,10 +119,12 @@ class CodeHighlighting extends React.Component {
    * @return {Element}
    */
 
-  renderNode = (props) => {
+  renderNode = props => {
     switch (props.node.type) {
-      case 'code': return <CodeBlock {...props} />
-      case 'code_line': return <CodeBlockLine {...props} />
+      case 'code':
+        return <CodeBlock {...props} />
+      case 'code_line':
+        return <CodeBlockLine {...props} />
     }
   }
 
@@ -135,17 +135,21 @@ class CodeHighlighting extends React.Component {
    * @return {Element}
    */
 
-  renderMark = (props) => {
+  renderMark = props => {
     const { children, mark } = props
     switch (mark.type) {
-      case 'comment': return <span style={{ opacity: '0.33' }}>{children}</span>
-      case 'keyword': return <span style={{ fontWeight: 'bold' }}>{children}</span>
-      case 'tag': return <span style={{ fontWeight: 'bold' }}>{children}</span>
-      case 'punctuation': return <span style={{ opacity: '0.75' }}>{children}</span>
+      case 'comment':
+        return <span style={{ opacity: '0.33' }}>{children}</span>
+      case 'keyword':
+        return <span style={{ fontWeight: 'bold' }}>{children}</span>
+      case 'tag':
+        return <span style={{ fontWeight: 'bold' }}>{children}</span>
+      case 'punctuation':
+        return <span style={{ opacity: '0.75' }}>{children}</span>
     }
   }
 
-  tokenToContent = (token) => {
+  tokenToContent = token => {
     if (typeof token == 'string') {
       return token
     } else if (typeof token.content == 'string') {
@@ -162,7 +166,7 @@ class CodeHighlighting extends React.Component {
    * @return {Array}
    */
 
-  decorateNode = (node) => {
+  decorateNode = node => {
     if (node.type != 'code') return
 
     const language = node.data.get('language')
@@ -215,7 +219,6 @@ class CodeHighlighting extends React.Component {
 
     return decorations
   }
-
 }
 
 /**