Skip to content

Commit 4c52727

Browse files
mysticateamysticatea
committed
Update: add babel-eslint support
1 parent d2630a4 commit 4c52727

11 files changed

+364
-199
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"devDependencies": {
1313
"appcache-manifest": "^2.1.0",
1414
"babel-core": "^6.26.0",
15+
"babel-eslint": "^8.1.2",
1516
"babel-loader": "^7.1.2",
1617
"babel-minify-webpack-plugin": "^0.2.0",
1718
"babel-preset-env": "^1.6.1",
@@ -31,7 +32,7 @@
3132
"shelljs": "^0.7.8",
3233
"string-replace-loader": "^1.3.0",
3334
"vue": "^2.5.9",
34-
"vue-eslint-parser": "^2.0.1-beta.2",
35+
"vue-eslint-parser": "^2.0.1-beta.3",
3536
"vue-loader": "^13.5.0",
3637
"vue-template-compiler": "^2.5.9",
3738
"webpack": "^3.8.1",

‎src/app-state.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default class PlaygroundState {
1515
const code = defaultCode
1616
const config = Object.assign({}, defaultConfig)
1717
config.rules = Object.assign({}, defaultConfig.rules)
18+
config.parserOptions = Object.assign({}, defaultConfig.parserOptions)
1819

1920
this.code = code
2021
this.config = config
@@ -79,6 +80,7 @@ export default class PlaygroundState {
7980
indentSize: this.indentSize,
8081
indentType: this.indentType,
8182
editorType: this.editorType,
83+
parser: this.config.parserOptions.parser,
8284
})
8385
const compressedString = pako.deflate(jsonString, { to: "string" })
8486

@@ -116,18 +118,21 @@ export default class PlaygroundState {
116118
}
117119
}
118120
}
119-
}
120-
if ((json.indentSize === 2 || json.indentSize === 4 || json.indentSize === 8) && json.indentSize !== this.indentSize) {
121-
this.indentSize = json.indentSize
122-
changed = true
123-
}
124-
if ((json.indentType === "space" || json.indentType === "tab") && json.indentType !== this.indentType) {
125-
this.indentType = json.indentType
126-
changed = true
127-
}
128-
if ((json.editorType === "codeAndFixedCode" || json.editorType === "codeOnly") && json.editorType !== this.editorType) {
129-
this.editorType = json.editorType
130-
changed = true
121+
if ((json.indentSize === 2 || json.indentSize === 4 || json.indentSize === 8) && json.indentSize !== this.indentSize) {
122+
this.indentSize = json.indentSize
123+
changed = true
124+
}
125+
if ((json.indentType === "space" || json.indentType === "tab") && json.indentType !== this.indentType) {
126+
this.indentType = json.indentType
127+
changed = true
128+
}
129+
if ((json.editorType === "codeAndFixedCode" || json.editorType === "codeOnly") && json.editorType !== this.editorType) {
130+
this.editorType = json.editorType
131+
changed = true
132+
}
133+
if ((json.parser === "espree" || json.parser === "babel-eslint") && json.parser !== this.config.parserOptions.parser) {
134+
this.config.parserOptions.parser = json.parser
135+
}
131136
}
132137

133138
// Update messages, fixedCode, and fixedMessages.

‎src/app-state/default-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -867,6 +867,7 @@ export default Object.freeze({
867867

868868
parser: "vue-eslint-parser",
869869
parserOptions: Object.freeze({
870+
parser: "espree",
870871
ecmaVersion: 2017,
871872
sourceType: "module",
872873
ecmaFeatures: Object.freeze({

‎src/app.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</label>
2626
</div>
2727
<div class="app__body">
28-
<rule-select
28+
<configuration
2929
class="app__sidebar"
3030
:config="config"
3131
@change="onConfigChange"
@@ -68,8 +68,8 @@
6868
<script>
6969
import AppState from "./app-state.js"
7070
import CodeEditor from "./code-editor.vue"
71+
import Configuration from "./configuration.vue"
7172
import MessageList from "./message-list.vue"
72-
import RuleSelect from "./rule-select.vue"
7373
import versions from "./versions.js"
7474
7575
export default {
@@ -78,7 +78,7 @@ export default {
7878
components: {
7979
CodeEditor,
8080
MessageList,
81-
RuleSelect,
81+
Configuration,
8282
},
8383
8484
data() {

‎src/configuration-category.vue‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<template>
2+
<li class="configuration-category__root">
3+
<!-- Header -->
4+
<label class="configuration-category__header">
5+
<input type="checkbox" v-model="opened" style="display:none">
6+
<md-icon :kind="opened ? 'expand_more' : 'chevron_right'"/>
7+
{{ header }}
8+
<span v-if="headerPeek" class="configuration-category__header-peek">
9+
{{ headerPeek }}
10+
</span>
11+
</label>
12+
<!-- Body -->
13+
<ul v-if="opened" class="configuration-category__body">
14+
<li v-if="multi && items.length >= 2">
15+
<label class="configuration-category__select-item">
16+
<div class="configuration-category__select-item-check">
17+
<input
18+
type="checkbox"
19+
:checked="allItemsAreChecked"
20+
@change="$emit('change', null, !allItemsAreChecked)"
21+
>
22+
</div>
23+
<div class="configuration-category__select-item-name">
24+
(all rules)
25+
</div>
26+
</label>
27+
</li>
28+
<li v-for="item of items" :key="item.id" :title="item.description">
29+
<label class="configuration-category__select-item">
30+
<div class="configuration-category__select-item-check">
31+
<input
32+
:type="selectType"
33+
:value="item.id"
34+
:checked="item.checked"
35+
@change="$emit('change', item.id, $event.target.checked)"
36+
>
37+
</div>
38+
<div class="configuration-category__select-item-name">
39+
{{ item.name }}
40+
</div>
41+
<a v-if="item.url" class="configuration-category__select-item-link" :href="item.url" target="_blank" rel="noopener">
42+
<md-icon kind="launch"/>
43+
</a>
44+
</label>
45+
</li>
46+
</ul>
47+
</li>
48+
</template>
49+
50+
<script>
51+
import MdIcon from "./md-icon.vue"
52+
53+
export default {
54+
name: "ConfigurationCategory",
55+
56+
components: { MdIcon },
57+
58+
props: {
59+
header: {
60+
type: String,
61+
default: "",
62+
},
63+
headerPeek: {
64+
type: String,
65+
default: "",
66+
},
67+
items: {
68+
type: Array,
69+
default() {
70+
return []
71+
},
72+
},
73+
multi: {
74+
type: Boolean,
75+
default: false,
76+
},
77+
},
78+
79+
data() {
80+
return { opened: false }
81+
},
82+
83+
computed: {
84+
selectType() {
85+
return this.multi ? "checkbox" : "radio"
86+
},
87+
88+
allItemsAreChecked() {
89+
return this.items.every(item => item.checked)
90+
},
91+
},
92+
}
93+
</script>
94+
95+
<style>
96+
.configuration-category__root {
97+
list-style: none;
98+
margin: 0;
99+
padding: 0;
100+
}
101+
102+
.configuration-category__header {
103+
display: block;
104+
position: sticky;
105+
top: 0;
106+
padding: 8px;
107+
background-color: #E8F5E9;
108+
border-bottom: 1px solid #4CAF50;
109+
font-weight: bold;
110+
cursor: pointer;
111+
box-shadow: 0 2px 2px rgba(0,0,0, 0.25);
112+
}
113+
.configuration-category__header-peek {
114+
white-space: nowrap;
115+
font-weight: normal;
116+
color: gray;
117+
}
118+
119+
.configuration-category__body {
120+
list-style: none;
121+
margin: 0;
122+
padding: 0;
123+
background-color: white;
124+
}
125+
126+
.configuration-category__select-item {
127+
display: flex;
128+
align-items: center;
129+
padding: 4px;
130+
padding-left: 16px;
131+
border-bottom: 1px solid #E8F5E9;
132+
}
133+
li:last-child > .configuration-category__select-item {
134+
border-bottom: 1px solid #4CAF50;
135+
}
136+
137+
.configuration-category__header:hover,
138+
.configuration-category__select-item:hover {
139+
background-image: linear-gradient(to bottom, rgba(0,0,0,0.065), rgba(0,0,0,0.0325) 67%, rgba(0,0,0,0.065));
140+
}
141+
142+
.configuration-category__select-item-check {
143+
flex-shrink: 0;
144+
padding-top: 4px; /* align to the rule name */
145+
padding-right: 4px;
146+
}
147+
.configuration-category__select-item-name {
148+
flex-grow: 1;
149+
}
150+
.configuration-category__select-item-link {
151+
display: block;
152+
flex-shrink: 0;
153+
}
154+
</style>

‎src/configuration-parser-select.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<configuration-category
3+
header="Parser"
4+
:header-peek="'('+config.parserOptions.parser+')'"
5+
:items="parsers"
6+
@change="onChange"
7+
/>
8+
</template>
9+
10+
<script>
11+
import ConfigurationCategory from "./configuration-category.vue"
12+
13+
const PARSRES = [
14+
{
15+
id: "espree",
16+
name: "espree (the default parser)",
17+
url: "https://github.com/eslint/espree",
18+
},
19+
{
20+
id: "babel-eslint",
21+
name: "babel-eslint",
22+
url: "https://github.com/babel/babel-eslint",
23+
},
24+
]
25+
26+
export default {
27+
name: "ConfigurationParserSelect",
28+
29+
components: { ConfigurationCategory },
30+
31+
props: {
32+
config: {
33+
type: Object,
34+
default() {
35+
return { parserOptions: { parser: "espree" } }
36+
},
37+
},
38+
},
39+
40+
computed: {
41+
parsers() {
42+
const parser = this.config.parserOptions.parser
43+
return PARSRES.map(p =>
44+
Object.assign({ checked: p.id === parser }, p)
45+
)
46+
},
47+
},
48+
49+
methods: {
50+
onChange(id, checked) {
51+
if (checked) {
52+
this.config.parserOptions.parser = id
53+
this.$emit("change")
54+
}
55+
},
56+
},
57+
}
58+
</script>

‎src/configuration-rules-select.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<configuration-category
3+
multi
4+
:header="category.name"
5+
:header-peek="counterText"
6+
:items="rules"
7+
@change="onChange"
8+
/>
9+
</template>
10+
11+
<script>
12+
import ConfigurationCategory from "./configuration-category.vue"
13+
import { getRuleUrl } from "./util.js"
14+
15+
export default {
16+
name: "ConfigurationRulesSelect",
17+
18+
components: { ConfigurationCategory },
19+
20+
props: {
21+
config: {
22+
type: Object,
23+
default() {
24+
return { rules: {} }
25+
},
26+
},
27+
category: {
28+
type: Object,
29+
default() {
30+
return { name: "", rules: [] }
31+
},
32+
},
33+
},
34+
35+
computed: {
36+
rules() {
37+
const severityMap = this.config.rules
38+
return this.category.rules.map(r => ({
39+
id: r.name,
40+
name: r.name,
41+
description: r.description,
42+
url: getRuleUrl(r.name),
43+
checked: severityMap[r.name] === 2,
44+
}))
45+
},
46+
47+
countChecked() {
48+
const severityMap = this.config.rules
49+
let count = 0
50+
for (const rule of this.category.rules) {
51+
if (severityMap[rule.name] === 2) {
52+
count += 1
53+
}
54+
}
55+
return count
56+
},
57+
58+
countAll() {
59+
return this.category.rules.length
60+
},
61+
62+
counterText() {
63+
return `(${this.countChecked}/${this.countAll})`
64+
},
65+
},
66+
67+
methods: {
68+
onChange(id, checked) {
69+
const severityMap = this.config.rules
70+
if (id == null) {
71+
for (const rule of this.rules) {
72+
severityMap[rule.id] = (checked ? 2 : 0)
73+
}
74+
}
75+
else {
76+
severityMap[id] = (checked ? 2 : 0)
77+
}
78+
this.$emit("change")
79+
},
80+
},
81+
}
82+
</script>

0 commit comments

Comments
 (0)