diff --git a/.eslintrc b/.eslintrc index 3d3271873..e48b87ac4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,8 +1,6 @@ { - "plugins": [ - "import", - "react" - ], + "extends": ["prettier", "prettier/react"], + "plugins": ["import", "react", "prettier"], "settings": { "import/extensions": [".js"] }, @@ -18,19 +16,8 @@ "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", @@ -38,18 +25,25 @@ "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,9 +62,6 @@ "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", @@ -78,15 +69,29 @@ "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 new file mode 100644 index 000000000..a790ef1b4 --- /dev/null +++ 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 index 348ad2dcc..a637caeec 100644 --- 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,11 +40,7 @@ class CheckListItem extends React.Component { {...attributes} > - + {children} @@ -54,7 +48,6 @@ class CheckListItem extends React.Component { ) } - } /** @@ -64,7 +57,6 @@ class CheckListItem extends React.Component { */ class CheckLists extends React.Component { - /** * Deserialize the initial editor value. * @@ -72,7 +64,7 @@ class CheckLists extends React.Component { */ 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 + case 'check-list-item': + return } } - } /** diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js index f645e6180..64c8929bc 100644 --- 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' }} > - @@ -41,9 +42,7 @@ function CodeBlock(props) { } function CodeBlockLine(props) { - return ( -
{props.children}
- ) + return
{props.children}
} /** @@ -53,7 +52,6 @@ function CodeBlockLine(props) { */ class CodeHighlighting extends React.Component { - /** * Deserialize the raw initial value. * @@ -61,7 +59,7 @@ class CodeHighlighting extends React.Component { */ 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 - case 'code_line': return + case 'code': + return + case 'code_line': + return } } @@ -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 {children} - case 'keyword': return {children} - case 'tag': return {children} - case 'punctuation': return {children} + case 'comment': + return {children} + case 'keyword': + return {children} + case 'tag': + return {children} + case 'punctuation': + return {children} } } - 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 } - } /** diff --git a/examples/embeds/index.js b/examples/embeds/index.js index 518982acb..8eac41b44 100644 --- a/examples/embeds/index.js +++ b/examples/embeds/index.js @@ -1,4 +1,3 @@ - import { Editor } from 'slate-react' import { Value } from 'slate' @@ -13,7 +12,6 @@ import initialValue from './value.json' */ class Embeds extends React.Component { - /** * Deserialize the raw initial value. * @@ -21,7 +19,7 @@ class Embeds extends React.Component { */ state = { - value: Value.fromJSON(initialValue) + value: Value.fromJSON(initialValue), } /** @@ -60,12 +58,12 @@ class Embeds extends React.Component { * @return {Element} */ - renderNode = (props) => { + renderNode = props => { switch (props.node.type) { - case 'video': return