Skip to content

Commit 3643bbe

Browse files
CompuIvesCompuIves
authored
Eslint support (codesandbox#5)
* eslint * Eslint fixing * Eslint default disabled
1 parent 0b16ca7 commit 3643bbe

File tree

14 files changed

+95581
-69
lines changed

14 files changed

+95581
-69
lines changed

‎config/webpack.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const config = {
6262
{
6363
test: /\.js$/,
6464
include: paths.src,
65+
exclude: [/eslint\.js$/],
6566
loader: 'babel-loader',
6667
options: babelConfig,
6768
},
@@ -234,6 +235,7 @@ if (__PROD__) {
234235
debug: false,
235236
}),
236237
new webpack.optimize.UglifyJsPlugin({
238+
beautify: false,
237239
compress: {
238240
warnings: false,
239241
screw_ie8: true,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"cross-spawn": "^5.0.1",
2424
"css-loader": "^0.27.3",
2525
"detect-port": "^1.0.7",
26-
"eslint": "^3.12.2",
26+
"eslint": "^3.19.0",
2727
"eslint-config-airbnb": "^14.1.0",
2828
"eslint-config-prettier": "^1.5.0",
2929
"eslint-import-resolver-webpack": "^0.8.1",

‎src/app/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
ga('send', 'pageview');
3636
</script>
3737
<script src="https://cdn.ravenjs.com/3.14.0/raven.min.js" crossorigin="anonymous"></script>
38+
39+
</script>
3840
</head>
3941

4042
<body style="margin: 0; padding: 0;">

‎src/app/pages/Sandbox/Editor/Content/subviews/CodeEditor/index.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styled from 'styled-components';
55
import { debounce } from 'lodash';
66

77
import { getCodeMirror } from 'app/utils/codemirror';
8+
import prettify from 'app/utils/codemirror/prettify';
89

910
import 'codemirror/addon/dialog/dialog';
1011
import 'codemirror/addon/hint/show-hint';
@@ -241,6 +242,14 @@ export default class CodeEditor extends React.PureComponent {
241242
} else {
242243
this.codemirror.setOption('keyMap', 'sublime');
243244
}
245+
246+
if (preferences.lintEnabled) {
247+
System.import('app/utils/codemirror/eslint-lint').then(() => {
248+
this.codemirror.setOption('lint', true);
249+
});
250+
} else {
251+
this.codemirror.setOption('lint', false);
252+
}
244253
};
245254

246255
handleChange = (cm: any, change: any) => {
@@ -249,16 +258,14 @@ export default class CodeEditor extends React.PureComponent {
249258
}
250259
};
251260

252-
getCode = () => {
253-
return this.codemirror.getValue();
254-
};
261+
getCode = () => this.codemirror.getValue();
255262

256263
prettify = async () => {
257-
const { id } = this.props;
264+
const { id, preferences } = this.props;
258265
const code = this.getCode();
259266
try {
260-
const prettier = await System.import('prettier');
261-
const newCode = prettier.format(code);
267+
const newCode = await prettify(code, preferences.lintEnabled);
268+
262269
if (newCode !== code) {
263270
this.props.changeCode(id, newCode);
264271
this.updateCodeMirrorCode(newCode);

‎src/app/pages/Sandbox/Editor/Workspace/Preferences/Preference.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export default class Preference extends React.Component {
2727
};
2828

2929
render() {
30-
const { title, enabled, tooltip } = this.props;
30+
const { title, enabled, tooltip, offset } = this.props;
3131

3232
const Title = tooltip
33-
? <Tooltip right message={tooltip} offset={50}>{title}</Tooltip>
33+
? <Tooltip right message={tooltip} offset={offset || 50}>{title}</Tooltip>
3434
: <span>{title}</span>;
3535

3636
return (

‎src/app/pages/Sandbox/Editor/Workspace/Preferences/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ class Preferences extends React.PureComponent {
4343
enabled={preferences.autoCompleteEnabled}
4444
onClick={preferencesActions.setAutoCompletePreference}
4545
/>
46+
<Preference
47+
title="Linter"
48+
tooltip="Made possible by eslint"
49+
offset={175}
50+
enabled={preferences.lintEnabled}
51+
onClick={preferencesActions.setLintPreference}
52+
/>
4653
<Preference
4754
title="Prettify on save"
4855
tooltip="Made possible by Prettier"

‎src/app/store/preferences/actions.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import {
55
AUTO_COMPLETE,
66
LIVE_PREVIEW,
77
PRETTIFY_ON_SAVE,
8+
LINT_ENABLED,
89
} from './keys';
910

1011
export const SET_PREFERENCE_AUTOCOMPLETE = 'SET_PREFERENCE_AUTOCOMPLETE';
1112
export const SET_PREFERENCE_VIM_MODE = 'SET_PREFERENCE_VIM_MODE';
1213
export const SET_PREFERENCE_LIVE_PREVIEW = 'SET_PREFERENCE_LIVE_PREVIEW';
1314
export const SET_PREFERENCE_PRETTIFY_ON_SAVE = 'SET_PREFERENCE_PRETTIFY_ON_SAVE';
15+
export const SET_PREFERENCE_LINT = 'SET_PREFERENCE_LINT';
1416

1517
const setOption = (key, val) => {
1618
try {
@@ -23,43 +25,50 @@ const setOption = (key, val) => {
2325
};
2426

2527
export default {
26-
setVimPreference: (vimMode: boolean) =>
27-
(dispatch: Function) => {
28-
setOption(VIM_MODE, vimMode);
28+
setVimPreference: (vimMode: boolean) => (dispatch: Function) => {
29+
setOption(VIM_MODE, vimMode);
2930

30-
dispatch({
31-
type: SET_PREFERENCE_VIM_MODE,
32-
option: vimMode,
33-
});
34-
},
31+
dispatch({
32+
type: SET_PREFERENCE_VIM_MODE,
33+
option: vimMode,
34+
});
35+
},
3536

36-
setAutoCompletePreference: (autoComplete: boolean) =>
37-
(dispatch: Function) => {
38-
setOption(AUTO_COMPLETE, autoComplete);
37+
setAutoCompletePreference: (autoComplete: boolean) => (
38+
dispatch: Function
39+
) => {
40+
setOption(AUTO_COMPLETE, autoComplete);
3941

40-
dispatch({
41-
type: SET_PREFERENCE_AUTOCOMPLETE,
42-
option: autoComplete,
43-
});
44-
},
42+
dispatch({
43+
type: SET_PREFERENCE_AUTOCOMPLETE,
44+
option: autoComplete,
45+
});
46+
},
4547

46-
setLivePreview: (livePreview: boolean) =>
47-
(dispatch: Function) => {
48-
setOption(LIVE_PREVIEW, livePreview);
48+
setLivePreview: (livePreview: boolean) => (dispatch: Function) => {
49+
setOption(LIVE_PREVIEW, livePreview);
4950

50-
dispatch({
51-
type: SET_PREFERENCE_LIVE_PREVIEW,
52-
option: livePreview,
53-
});
54-
},
51+
dispatch({
52+
type: SET_PREFERENCE_LIVE_PREVIEW,
53+
option: livePreview,
54+
});
55+
},
5556

56-
setPrettifyOnSavePreference: (prettify: boolean) =>
57-
(dispatch: Function) => {
58-
setOption(PRETTIFY_ON_SAVE, prettify);
57+
setPrettifyOnSavePreference: (prettify: boolean) => (dispatch: Function) => {
58+
setOption(PRETTIFY_ON_SAVE, prettify);
5959

60-
dispatch({
61-
type: SET_PREFERENCE_PRETTIFY_ON_SAVE,
62-
option: prettify,
63-
});
64-
},
60+
dispatch({
61+
type: SET_PREFERENCE_PRETTIFY_ON_SAVE,
62+
option: prettify,
63+
});
64+
},
65+
66+
setLintPreference: (lint: boolean) => (dispatch: Function) => {
67+
setOption(LINT_ENABLED, lint);
68+
69+
dispatch({
70+
type: SET_PREFERENCE_LINT,
71+
option: lint,
72+
});
73+
},
6574
};

‎src/app/store/preferences/keys.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export const AUTO_COMPLETE = 'settings.autocomplete';
22
export const VIM_MODE = 'settings.vimmode';
33
export const LIVE_PREVIEW = 'settings.livepreview';
44
export const PRETTIFY_ON_SAVE = 'settings.prettifyonsave';
5+
export const LINT_ENABLED = 'settings.lintenabled';

‎src/app/store/preferences/reducer.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import {
55
SET_PREFERENCE_VIM_MODE,
66
SET_PREFERENCE_LIVE_PREVIEW,
77
SET_PREFERENCE_PRETTIFY_ON_SAVE,
8+
SET_PREFERENCE_LINT,
89
} from './actions';
910
import {
1011
AUTO_COMPLETE,
1112
VIM_MODE,
1213
LIVE_PREVIEW,
1314
PRETTIFY_ON_SAVE,
15+
LINT_ENABLED,
1416
} from './keys';
1517

1618
export type Preferences = {
@@ -34,6 +36,7 @@ const initialState: Preferences = {
3436
vimMode: getKey(VIM_MODE, false),
3537
livePreviewEnabled: getKey(LIVE_PREVIEW, true),
3638
prettifyOnSaveEnabled: getKey(PRETTIFY_ON_SAVE, false),
39+
lintEnabled: getKey(LINT_ENABLED, false),
3740
};
3841

3942
export default (state = initialState, action) => {
@@ -46,6 +49,8 @@ export default (state = initialState, action) => {
4649
return { ...state, livePreviewEnabled: action.option };
4750
case SET_PREFERENCE_PRETTIFY_ON_SAVE:
4851
return { ...state, prettifyOnSaveEnabled: action.option };
52+
case SET_PREFERENCE_LINT:
53+
return { ...state, lintEnabled: action.option };
4954
default: {
5055
return state;
5156
}

‎src/app/utils/codemirror.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const getCodeMirror = (el, doc) => {
6969
.cm-s-oceanic div.cm-line-error.CodeMirror-linebackground { animation: ${fadeInAnimation} 0.3s; background-color: #561011; }
7070
`;
7171

72-
return new CodeMirror(el, {
72+
const cm = new CodeMirror(el, {
7373
value: doc,
7474
theme: 'oceanic',
7575
keyMap: 'sublime',
@@ -81,5 +81,8 @@ export const getCodeMirror = (el, doc) => {
8181
lineNumbers: true,
8282
lineWrapping: true,
8383
styleActiveLine: true,
84+
lint: false,
8485
});
86+
87+
return cm;
8588
};

0 commit comments

Comments
 (0)