Skip to content

Commit 33eeb55

Browse files
mysticateamysticatea
committed
New: the first implementation
1 parent 3f36f28 commit 33eeb55

22 files changed

+2318
-0
lines changed

‎.babelrc

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"useBuiltIns": "usage",
7+
"modules": false,
8+
"targets": {
9+
"browsers": [
10+
"last 2 Chrome versions",
11+
"last 2 Edge versions",
12+
"last 2 Firefox versions",
13+
"last 2 Safari versions"
14+
]
15+
}
16+
}
17+
]
18+
]
19+
}

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/dist
2+
/src/core-rules.js
3+
/src/vue-rules.js

‎.eslintrc.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"root": true,
3+
"parserOptions": {
4+
"ecmaVersion": 2017
5+
},
6+
"extends": [
7+
"mysticatea",
8+
"mysticatea/modules",
9+
"plugin:vue/recommended"
10+
],
11+
"plugins": [
12+
"node"
13+
],
14+
"env": {
15+
"browser": false
16+
},
17+
"globals": {
18+
"document": false,
19+
"location": false,
20+
"window": false
21+
},
22+
"rules": {
23+
"node/no-extraneous-import": "error",
24+
"node/no-missing-import": "error",
25+
"node/no-unpublished-import": "error",
26+
"vue/html-indent": ["error", 4],
27+
"vue/max-attributes-per-line": "off"
28+
}
29+
}

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/dist
2+
/node_modules
3+
/npm-debug.log
4+
/test.*
5+
.DS_Store

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎.vscode/settings.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"eslint.validate": [
3+
"javascript",
4+
{"autoFix": true, "language": "vue"}
5+
]
6+
}

‎package.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "vue-eslint-demo",
3+
"version": "1.0.0",
4+
"description": "The online demo to check `eslint-plugin-vue`.",
5+
"engines": {
6+
"node": ">=8"
7+
},
8+
"files": [
9+
"dist"
10+
],
11+
"dependencies": {},
12+
"devDependencies": {
13+
"appcache-manifest": "^2.1.0",
14+
"babel-core": "^6.26.0",
15+
"babel-loader": "^7.1.2",
16+
"babel-minify-webpack-plugin": "^0.2.0",
17+
"babel-preset-env": "^1.6.1",
18+
"cpx": "^1.5.0",
19+
"cross-env": "^5.1.1",
20+
"css-loader": "^0.28.7",
21+
"eslint": "^4.12.0",
22+
"eslint-config-mysticatea": "^12.0.0",
23+
"eslint-plugin-vue": "^4.0.0-beta.0",
24+
"file-loader": "^1.1.5",
25+
"lodash": "^4.17.4",
26+
"monaco-editor": "^0.10.1",
27+
"npm-run-all": "^4.1.2",
28+
"rimraf": "^2.6.2",
29+
"string-replace-loader": "^1.3.0",
30+
"vue": "^2.5.9",
31+
"vue-eslint-parser": "^2.0.1-beta.2",
32+
"vue-loader": "^13.5.0",
33+
"vue-template-compiler": "^2.5.9",
34+
"webpack": "^3.8.1",
35+
"webpack-dev-server": "^2.9.5"
36+
},
37+
"scripts": {
38+
"build": "cross-env NODE_ENV=production run-s clean build:*",
39+
"build:html": "appcache-manifest-fixer src/index.html -o dist/index.html",
40+
"build:js": "webpack --progress --hide-modules",
41+
"build:monaco": "cpx node_modules/monaco-editor/min/vs/**/* dist/vs",
42+
"build:manifest": "appcache-manifest \"dist/**/*.{css,html,js,svg}\" --prefix /vue-eslint-demo --network-star -o dist/index.appcache",
43+
"clean": "rimraf dist",
44+
"watch": "cross-env NODE_ENV=development run-p watch:*",
45+
"watch:html": "cpx src/*.html dist --watch",
46+
"watch:js": "webpack-dev-server --open --hot",
47+
"watch:monaco": "cpx node_modules/monaco-editor/min/vs/**/* dist/vs --watch"
48+
},
49+
"repository": {
50+
"type": "git",
51+
"url": "git+https://github.com/mysticatea/vue-eslint-demo.git"
52+
},
53+
"keywords": [],
54+
"author": "Toru Nagashima (https://github.com/mysticatea)",
55+
"license": "MIT",
56+
"bugs": {
57+
"url": "https://github.com/mysticatea/vue-eslint-demo/issues"
58+
},
59+
"homepage": "https://github.com/mysticatea/vue-eslint-demo#readme"
60+
}

‎src/app.vue

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<template>
2+
<div class="app__root">
3+
<div class="app__header">
4+
<label class="app__show-fixed-code-button">
5+
<input
6+
type="checkbox"
7+
v-model="showFixedCode"
8+
>
9+
Show fixed code
10+
</label>
11+
Playground for <a href="https://github.com/vuejs/eslint-plugin-vue#readme" target="_blank">eslint-plugin-vue</a>.
12+
</div>
13+
<div class="app__body">
14+
<rule-select
15+
class="app__sidebar"
16+
:config="config"
17+
@change="onConfigChange"
18+
/>
19+
<div class="app__main">
20+
<code-editor
21+
class="app__editor"
22+
:code="code"
23+
:messages="messages"
24+
:fixed-code="fixedCode"
25+
:fixed-messages="fixedMessages"
26+
:show-fixed-code="showFixedCode"
27+
@edit="onEdit"
28+
@initialize.once="onEditorInitialize"
29+
/>
30+
<message-list
31+
class="app__errors"
32+
:messages="messages"
33+
>
34+
Errors.
35+
</message-list>
36+
</div>
37+
</div>
38+
<div class="app__footer">
39+
<div
40+
class="app__version-item"
41+
v-for="(version, name) in versions"
42+
:key="name"
43+
>
44+
{{ name }} {{ version }}
45+
</div>
46+
</div>
47+
</div>
48+
</template>
49+
50+
<script>
51+
import CodeEditor from "./code-editor.vue"
52+
import MessageList from "./message-list.vue"
53+
import RuleSelect from "./rule-select.vue"
54+
import { linter } from "./eslint.js"
55+
import { deserializeState, serializeState } from "./state.js"
56+
import versions from "./versions.js"
57+
58+
export default {
59+
name: "App",
60+
61+
components: {
62+
CodeEditor,
63+
MessageList,
64+
RuleSelect,
65+
},
66+
67+
data() {
68+
return deserializeState(location.hash.slice(1))
69+
},
70+
71+
computed: {
72+
messages() {
73+
try {
74+
return linter.verify(this.code, this.config)
75+
}
76+
catch (err) {
77+
return [{
78+
fatal: true,
79+
severity: 2,
80+
message: err.message,
81+
line: 1,
82+
column: 0,
83+
}]
84+
}
85+
},
86+
87+
fixResult() {
88+
try {
89+
return linter.verifyAndFix(this.code, this.config)
90+
}
91+
catch (err) {
92+
return {
93+
output: this.code,
94+
messages: [{
95+
fatal: true,
96+
severity: 2,
97+
message: err.message,
98+
line: 1,
99+
column: 0,
100+
}],
101+
}
102+
}
103+
},
104+
105+
fixedCode() {
106+
return this.fixResult.output
107+
},
108+
109+
fixedMessages() {
110+
return this.fixResult.messages
111+
},
112+
113+
versions() {
114+
return versions
115+
},
116+
},
117+
118+
mounted() {
119+
window.addEventListener("hashchange", this.onUrlHashChange)
120+
},
121+
beforeDestroey() {
122+
window.removeEventListener("hashchange", this.onUrlHashChange)
123+
},
124+
125+
methods: {
126+
onEdit(code) {
127+
this.code = code
128+
this.applyUrlHash()
129+
},
130+
131+
onEditorInitialize() {
132+
this.$emit("initialize")
133+
},
134+
135+
onConfigChange() {
136+
this.applyUrlHash()
137+
},
138+
139+
onUrlHashChange() {
140+
const newSerializedState = location.hash.slice(1)
141+
const oldSerializedState = serializeState(this.$data)
142+
143+
if (newSerializedState !== oldSerializedState) {
144+
Object.assign(this.$data, deserializeState(newSerializedState))
145+
}
146+
},
147+
148+
applyUrlHash() {
149+
location.hash = `#${serializeState(this.$data)}`
150+
},
151+
},
152+
}
153+
</script>
154+
155+
<style>
156+
a {
157+
color: inherit;
158+
}
159+
a:hover {
160+
color: #2196F3;
161+
}
162+
163+
.app__root {
164+
display: flex;
165+
flex-direction: column;
166+
width: 100%;
167+
height: 100%;
168+
}
169+
170+
.app__header {
171+
flex-shrink: 0;
172+
padding: 8px;
173+
background-color: #A5D6A7;
174+
border-bottom: 1px solid #4CAF50;
175+
font-weight: bold;
176+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
177+
z-index: 1;
178+
}
179+
180+
.app__body {
181+
display: flex;
182+
height: 100%;
183+
flex-grow: 1;
184+
}
185+
186+
.app__sidebar {
187+
width: calc(25% - 1px);
188+
height: 100%;
189+
border-right: 1px solid #CCC;
190+
}
191+
192+
.app__main {
193+
display: flex;
194+
flex-direction: column;
195+
flex-grow: 1;
196+
}
197+
198+
.app__editor {
199+
height: calc(75% - 1px);
200+
flex-grow: 1;
201+
border-bottom: 1px solid #CCC;
202+
}
203+
204+
.app__errors {
205+
height: 25%;
206+
}
207+
208+
.app__show-fixed-code-button {
209+
display: block;
210+
float: right;
211+
font-weight: normal;
212+
}
213+
.app__show-fixed-code-button > input[type=checkbox] {
214+
vertical-align: middle;
215+
}
216+
217+
.app__footer {
218+
display: flex;
219+
justify-content: flex-end;
220+
border-top: 1px solid #CCC;
221+
}
222+
.app__version-item {
223+
margin-right: 8px;
224+
}
225+
.app__version-item:not(:last-child)::after {
226+
content: ","
227+
}
228+
</style>

0 commit comments

Comments
 (0)