diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index bdc7d655bb..6ba1a6c5d0 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/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) { diff --git a/package-lock.json b/package-lock.json index 95e6ca0c97..a38681b7e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32809,8 +32809,7 @@ "prettier": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", - "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", - "dev": true + "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==" }, "prettier-linter-helpers": { "version": "1.0.0", diff --git a/package.json b/package.json index aa4ee0cc45..a154070c64 100644 --- a/package.json +++ b/package.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",