Merge pull request #1788 from satyasaibhushan/switching_to_prettier_from_beautify-js

Switching to prettier from beautify js

Author: catarak

client/modules/IDE/components/Editor.jsx

@@ -2,7 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
 import emmet from '@emmetio/codemirror-plugin';
-import beautifyJS from 'js-beautify';
+import prettier from 'prettier';
+import babelParser from 'prettier/parser-babel';
+import htmlParser from 'prettier/parser-html';
+import cssParser from 'prettier/parser-postcss';
 import { withTranslation } from 'react-i18next';
 import 'codemirror/mode/css/css';
 import 'codemirror/addon/selection/active-line';
@@ -59,14 +62,10 @@ import * as ConsoleActions from '../actions/console';
 
 emmet(CodeMirror);
 
-const beautifyCSS = beautifyJS.css;
-const beautifyHTML = beautifyJS.html;
-
 window.JSHINT = JSHINT;
 window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
 
-const IS_TAB_INDENT = false;
 const INDENTATION_AMOUNT = 2;
 
 class Editor extends React.Component {
@@ -335,31 +334,33 @@ class Editor extends React.Component {
     this._cm.execCommand('replace');
   }
 
+  prettierFormatWithCursor(parser, plugins) {
+    try {
+      const { formatted, cursorOffset } = prettier.formatWithCursor(
+        this._cm.doc.getValue(),
+        {
+          cursorOffset: this._cm.doc.indexFromPos(this._cm.doc.getCursor()),
+          parser,
+          plugins
+        }
+      );
+      this._cm.doc.setValue(formatted);
+      this._cm.focus();
+      this._cm.doc.setCursor(this._cm.doc.posFromIndex(cursorOffset));
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   tidyCode() {
-    const beautifyOptions = {
-      indent_size: INDENTATION_AMOUNT,
-      indent_with_tabs: IS_TAB_INDENT
-    };
     const mode = this._cm.getOption('mode');
-    const currentPosition = this._cm.doc.getCursor();
     if (mode === 'javascript') {
-      this._cm.doc.setValue(
-        beautifyJS(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('babel', [babelParser]);
     } else if (mode === 'css') {
-      this._cm.doc.setValue(
-        beautifyCSS(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('css', [cssParser]);
     } else if (mode === 'htmlmixed') {
-      this._cm.doc.setValue(
-        beautifyHTML(this._cm.doc.getValue(), beautifyOptions)
-      );
+      this.prettierFormatWithCursor('html', [htmlParser]);
     }
-    this._cm.focus();
-    this._cm.doc.setCursor({
-      line: currentPosition.line,
-      ch: currentPosition.ch + INDENTATION_AMOUNT
-    });
   }
 
   initializeDocuments(files) {

package-lock.json

@@ -122,7 +122,6 @@
     "postcss-focus": "^4.0.0",
     "postcss-loader": "^4.2.0",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^2.7.1",
     "sass-loader": "^10.1.1",
@@ -177,7 +176,6 @@
     "i18next-http-backend": "^1.0.21",
     "is-url": "^1.2.4",
     "jest-express": "^1.11.0",
-    "js-beautify": "^1.10.3",
     "jsdom": "^9.8.3",
     "jshint": "^2.11.0",
     "lodash": "^4.17.19",
@@ -194,6 +192,7 @@
     "passport-google-oauth20": "^1.0.0",
     "passport-http": "^0.3.0",
     "passport-local": "^1.0.0",
+    "prettier": "^2.2.1",
     "pretty-bytes": "^3.0.1",
     "primer-tooltips": "^1.5.11",
     "prop-types": "^15.6.2",