Integrate eslint and prettier

react-monaco-editor · Jul 22, 2019 · aa90cf1 · aa90cf1
1 parent 172ea1f
commit aa90cf1
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 659 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
-src/index.d.ts
+example/node_modules
+node_modules
+src/index.d.ts
diff --git a/.eslintrc b/.eslintrc
@@ -1,7 +1,13 @@
 {
   "parser": "babel-eslint",
-  "extends": ["eslint-config-airbnb", "plugin:react/recommended"],
+  "extends": [
+    "prettier",
+    "airbnb",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
   "rules": {
+    "prettier/prettier": 1,
     "array-bracket-spacing": 0,
     "comma-dangle": 0,
     "valid-jsdoc": 2,
@@ -15,9 +21,7 @@
     "jsx-a11y/href-no-hash": 0,
     "react/destructuring-assignment": 0
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react", "prettier"],
   "globals": {
     "monaco": true
   },

diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
-node_js: "8"
+node_js: "12"
 script:
   - yarn lint
   - yarn test

diff --git a/example/index.js b/example/index.js
@@ -1,60 +1,68 @@
-import React from 'react';
-import { render } from 'react-dom';
-import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor';
+import React from "react";
+import { render } from "react-dom";
+import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
 
 class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      code: '// type your code... \n',
-      theme: 'vs-light'
-    }
+      code: "// type your code... \n",
+      theme: "vs-light"
+    };
   }
 
-  onChange = (newValue) => {
-    console.log('onChange', newValue); // eslint-disable-line no-console
-  }
+  onChange = newValue => {
+    console.log("onChange", newValue); // eslint-disable-line no-console
+  };
 
-  editorDidMount = (editor) => {
+  editorDidMount = editor => {
     // eslint-disable-next-line no-console
-    console.log('editorDidMount', editor, editor.getValue(), editor.getModel());
+    console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
     this.editor = editor;
-  }
+  };
 
   changeEditorValue = () => {
     if (this.editor) {
-      this.editor.setValue('// code changed! \n');
+      this.editor.setValue("// code changed! \n");
     }
-  }
+  };
 
   changeBySetState = () => {
-    this.setState({ code: '// code changed by setState! \n' });
-  }
+    this.setState({ code: "// code changed by setState! \n" });
+  };
 
   setDarkTheme = () => {
-    this.setState({ theme: 'vs-dark' })
-  }
+    this.setState({ theme: "vs-dark" });
+  };
 
   setLightTheme = () => {
-    this.setState({ theme: 'vs-light' })
-  }
+    this.setState({ theme: "vs-light" });
+  };
 
   render() {
     const { code, theme } = this.state;
     const options = {
       selectOnLineNumbers: true,
       roundedSelection: false,
       readOnly: false,
-      cursorStyle: 'line',
-      automaticLayout: false,
+      cursorStyle: "line",
+      automaticLayout: false
     };
     return (
       <div>
         <div>
-          <button onClick={this.changeEditorValue} type="button">Change value</button>
-          <button onClick={this.changeBySetState} type="button">Change by setState</button>
-          <button onClick={this.setDarkTheme} type="button">Set dark theme</button>
-          <button onClick={this.setLightTheme} type="button">Set light theme</button>
+          <button onClick={this.changeEditorValue} type="button">
+            Change value
+          </button>
+          <button onClick={this.changeBySetState} type="button">
+            Change by setState
+          </button>
+          <button onClick={this.setDarkTheme} type="button">
+            Set dark theme
+          </button>
+          <button onClick={this.setLightTheme} type="button">
+            Set light theme
+          </button>
         </div>
         <hr />
         <MonacoEditor
@@ -71,48 +79,52 @@ class CodeEditor extends React.Component {
   }
 }
 
-class AnotherEditor extends React.Component { // eslint-disable-line react/no-multi-comp
+class AnotherEditor extends React.Component {
+  // eslint-disable-line react/no-multi-comp
   constructor(props) {
     super(props);
     const jsonCode = [
-      '{',
+      "{",
       '    "$schema": "http://myserver/foo-schema.json"',
-      '}'
-    ].join('\n');
+      "}"
+    ].join("\n");
     this.state = {
-      code: jsonCode,
-    }
+      code: jsonCode
+    };
   }
 
-  editorWillMount = (monaco) => {
+  editorWillMount = monaco => {
     monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
-      schemas: [{
-        uri: 'http://myserver/foo-schema.json',
-        schema: {
-          type: 'object',
-          properties: {
-            p1: {
-              enum: [ 'v1', 'v2']
-            },
-            p2: {
-              $ref: 'http://myserver/bar-schema.json'
+      schemas: [
+        {
+          uri: "http://myserver/foo-schema.json",
+          schema: {
+            type: "object",
+            properties: {
+              p1: {
+                enum: ["v1", "v2"]
+              },
+              p2: {
+                $ref: "http://myserver/bar-schema.json"
+              }
             }
           }
-        }
-      }, {
-        uri: 'http://myserver/bar-schema.json',
-        schema: {
-          type: 'object',
-          properties: {
-            q1: {
-              enum: [ 'x1', 'x2']
+        },
+        {
+          uri: "http://myserver/bar-schema.json",
+          schema: {
+            type: "object",
+            properties: {
+              q1: {
+                enum: ["x1", "x2"]
+              }
             }
           }
         }
-      }]
+      ]
     });
-  }
+  };
 
   render() {
     const { code } = this.state;
@@ -130,18 +142,19 @@ class AnotherEditor extends React.Component { // eslint-disable-line react/no-mu
   }
 }
 
-class DiffEditor extends React.Component { // eslint-disable-line react/no-multi-comp
+class DiffEditor extends React.Component {
+  // eslint-disable-line react/no-multi-comp
   constructor(props) {
     super(props);
     this.state = {
       code: 'const a = "Hello Monaco"',
-      original: 'const a = "Hello World"',
-    }
+      original: 'const a = "Hello World"'
+    };
   }
 
-  onChange = (newValue) => {
-    console.log('onChange', newValue); // eslint-disable-line no-console
-  }
+  onChange = newValue => {
+    console.log("onChange", newValue); // eslint-disable-line no-console
+  };
 
   render() {
     const { code, original } = this.state;
@@ -172,9 +185,6 @@ const App = () => (
     <h2>Another editor (showing a diff)</h2>
     <DiffEditor />
   </div>
-)
-
-render(
-  <App />,
-  document.getElementById('root')
 );
+
+render(<App />, document.getElementById("root"));
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,55 +1,52 @@
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const path = require('path');
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+const path = require("path");
 
-const MonacoEditorSrc = path.join(__dirname, '..', 'src');
+const MonacoEditorSrc = path.join(__dirname, "..", "src");
 
 module.exports = {
-  entry: './index.js',
-  mode: 'development',
-  devtool: 'source-map',
+  entry: "./index.js",
+  mode: "development",
+  devtool: "source-map",
   output: {
-    path: path.join(__dirname, './lib/t'),
-    filename: 'index.js',
+    path: path.join(__dirname, "./lib/t"),
+    filename: "index.js"
   },
   module: {
     rules: [
       {
         test: /\.html$/,
-        use: ['file?name=[name].[ext]'],
+        use: ["file?name=[name].[ext]"]
       },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              '@babel/preset-env',
-              '@babel/preset-react'
-            ],
-            plugins: [
-              '@babel/plugin-proposal-class-properties',
-            ]
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env", "@babel/preset-react"],
+              plugins: ["@babel/plugin-proposal-class-properties"]
+            }
           }
-        }]
+        ]
       },
       {
         test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ]
+        use: ["style-loader", "css-loader"]
       }
-    ],
+    ]
   },
   resolve: {
-    extensions: ['.js', '.json'],
-    alias: { 'react-monaco-editor': MonacoEditorSrc }
+    extensions: [".js", ".json"],
+    alias: { "react-monaco-editor": MonacoEditorSrc }
   },
   plugins: [
     new MonacoWebpackPlugin({
-      languages: ['json', 'javascript', 'typescript']
-    }),
+      languages: ["json", "javascript", "typescript"]
+    })
   ],
-  devServer: { contentBase: './' },
+  devServer: { contentBase: "./" },
   node: {
-    fs: 'empty'
+    fs: "empty"
   }
-}
+};
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "preversion": "npm run lint",
     "build": "babel src --out-dir lib",
     "clean": "rimraf lib",
-    "format": "prettier-eslint --write src/**/*",
-    "lint": "prettier-eslint --list-different src/**/*",
+    "format": "eslint --fix '{src,test,example}/**/*.{ts,js}'",
+    "lint": "eslint '{src,test,example}/**/*.{ts,js}'",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "test": "npm run test:typescript",
     "test:typescript": "typings-tester --dir test/typescript"
@@ -39,13 +39,16 @@
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "eslint": "^6.0.1",
+    "babel-eslint": "^10.0.2",
+    "eslint": "^6.1.0",
     "eslint-config-airbnb": "^17.1.1",
+    "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.2",
     "monaco-editor": "^0.17.1",
-    "prettier-eslint-cli": "^5.0.0",
+    "prettier": "^1.18.2",
     "react": "^16.8.3",
     "rimraf": "^2.6.3",
     "typescript": "^3.5.3",