Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(prettier): Format with Prettier on Cmd/Ctrl+S (#36)
- Loading branch information
1 parent
7564103
commit 716c3bd
Showing
7 changed files
with
1,488 additions
and
196 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "presets": [ | ||
| "@babel/preset-env", | ||
| "@babel/preset-react" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import prettier from 'prettier/standalone'; | ||
| import babylon from 'prettier/parser-babylon'; | ||
|
|
||
| export const runPrettier = ({ code, cursorOffset }) => { | ||
| try { | ||
| return prettier.formatWithCursor(code, { | ||
| cursorOffset, | ||
| parser: 'babylon', | ||
| plugins: [babylon] | ||
| }); | ||
| } catch (e) { | ||
| // Just a formatting error so we pass | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| export const positionToCursorOffset = (code, { line, ch }) => { | ||
| return code.split('\n').reduce((pos, currLine, index) => { | ||
| if (index < line) { | ||
| return pos + currLine.length + 1; | ||
| } else if (index === line) { | ||
| return pos + ch; | ||
| } | ||
| return pos; | ||
| }, 0); | ||
| }; | ||
|
|
||
| export const cursorOffsetToPosition = (code, cursorOffset) => { | ||
| const substring = code.slice(0, cursorOffset); | ||
| const line = substring.split('\n').length - 1; | ||
| const indexOfLastLine = substring.lastIndexOf('\n'); | ||
|
|
||
| return { | ||
| line, | ||
| ch: cursorOffset - indexOfLastLine - 1 | ||
| }; | ||
| }; | ||
|
|
||
| export const wrapJsx = code => `<>\n${code}\n</>`; | ||
|
|
||
| // Removes `<>\n` and `\n</>` and unindents the two spaces due to the wrapping | ||
| export const unwrapJsx = code => code.replace(/\n {2}/g, '\n').slice(3, -5); | ||
|
|
||
| // Handles running prettier, ensuring multiple root level JSX values are valid | ||
| // by wrapping the code in <>{code}</> then finally removing the layer of indentation | ||
| // all while maintaining the cursor position. | ||
| export const formatCode = ({ code, cursor }) => { | ||
| // Since we're automatically adding a line due to the wrapping we need to | ||
| // remove one | ||
| const WRAPPED_LINE_OFFSET = 1; | ||
| // Since we are wrapping we need to "unindent" the cursor one level , i.e two spaces. | ||
| const WRAPPED_INDENT_OFFSET = 2; | ||
|
|
||
| const wrappedCode = wrapJsx(code); | ||
|
|
||
| const currentCursorPosition = positionToCursorOffset(wrappedCode, { | ||
| line: cursor.line + WRAPPED_LINE_OFFSET, | ||
| ch: cursor.ch | ||
| }); | ||
|
|
||
| const formatResult = runPrettier({ | ||
| code: wrappedCode, | ||
| cursorOffset: currentCursorPosition | ||
| }); | ||
|
|
||
| const formattedCode = unwrapJsx(formatResult.formatted); | ||
|
|
||
| const position = cursorOffsetToPosition( | ||
| formatResult.formatted, | ||
| formatResult.cursorOffset | ||
| ); | ||
|
|
||
| return { | ||
| formattedCode, | ||
| line: position.line - WRAPPED_LINE_OFFSET, | ||
| ch: position.ch - WRAPPED_INDENT_OFFSET | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { | ||
| positionToCursorOffset, | ||
| cursorOffsetToPosition, | ||
| formatCode | ||
| } from './formatting'; | ||
|
|
||
| describe('cursor offset to position', () => { | ||
| it('should work for one line', () => { | ||
| const code = `<h1>Title</h1>`; | ||
| const position = 4; // Before the capital T | ||
|
|
||
| expect(cursorOffsetToPosition(code, position)).toEqual({ line: 0, ch: 4 }); | ||
| }); | ||
|
|
||
| it('should work across multiple lines', () => { | ||
| const code = `<div>\n<h1>Title</h1>\n</div>`; | ||
| const position = 10; // Before the capital T | ||
|
|
||
| expect(cursorOffsetToPosition(code, position)).toEqual({ line: 1, ch: 4 }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('position to cursor offset', () => { | ||
| it('should work for one line', () => { | ||
| const code = `<h1>Title</h1>`; | ||
| const offset = { | ||
| line: 0, | ||
| ch: 4 | ||
| }; // Before the capital T | ||
|
|
||
| expect(positionToCursorOffset(code, offset)).toEqual(4); | ||
| }); | ||
|
|
||
| it('should work across multiple lines', () => { | ||
| const code = `<div>\n<h1>Title</h1>\n</div>`; | ||
| const offset = { | ||
| line: 1, | ||
| ch: 4 | ||
| }; | ||
|
|
||
| expect(positionToCursorOffset(code, offset)).toEqual(10); | ||
| }); | ||
| }); | ||
|
|
||
| describe('formatting code', () => { | ||
| it('should handle one line', () => { | ||
| const code = `<div><h1>Title</h1></div>`; | ||
| expect(formatCode({ code, cursor: { line: 0, ch: 9 } })).toEqual({ | ||
| line: 1, | ||
| ch: 6, | ||
| formattedCode: `<div>\n <h1>Title</h1>\n</div>\n` | ||
| }); | ||
| }); | ||
|
|
||
| it('should handle multiple lines', () => { | ||
| const code = `<div>\n<h1>Title</h1>\n</div>`; | ||
| expect(formatCode({ code, cursor: { line: 1, ch: 4 } })).toEqual({ | ||
| line: 1, | ||
| ch: 6, | ||
| formattedCode: `<div>\n <h1>Title</h1>\n</div>\n` | ||
| }); | ||
| }); | ||
|
|
||
| it('should handle multiple root level jsx elements', () => { | ||
| const code = `<div><h1>Title</h1></div><div><h1>Title Two</h1></div>`; | ||
| expect(formatCode({ code, cursor: { line: 0, ch: 34 } })).toEqual({ | ||
| line: 4, | ||
| ch: 6, | ||
| formattedCode: `<div>\n <h1>Title</h1>\n</div>\n<div>\n <h1>Title Two</h1>\n</div>\n` | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.