Skip to content

Commit dc66c5a

Browse files
ConduitryConduitry
committed
move editor integration info to its own file
1 parent 0db02a2 commit dc66c5a

File tree

2 files changed

+102
-101
lines changed

2 files changed

+102
-101
lines changed

‎INTEGRATIONS.md

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Visual Studio Code
2+
3+
You'll need the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension installed.
4+
5+
Unless you're using `.html` for your Svelte components, you'll need to configure `files.associations` to associate the appropriate file extension with the `html` language. For example, to associate `.svelte`, put this in your `settings.json`:
6+
7+
```json
8+
{
9+
"files.associations": {
10+
"*.svelte": "html"
11+
}
12+
}
13+
```
14+
15+
Then, you'll need to tell the ESLint extension to also lint files with language `html` and to enable autofixing where possible. If you haven't adjusted the `eslint.validate` setting, it defaults to `[ "javascript", "javascriptreact" ]`, so put this in your `settings.json`:
16+
17+
```json
18+
{
19+
"eslint.validate": [
20+
"javascript",
21+
"javascriptreact",
22+
{
23+
"language": "html",
24+
"autoFix": true
25+
}
26+
]
27+
}
28+
```
29+
30+
Reload VS Code and give it a go!
31+
32+
# Atom
33+
34+
You'll need the [linter](https://atom.io/packages/linter) and [linter-eslint](https://atom.io/packages/linter-eslint) packages installed.
35+
36+
Unless you're using `.html` for your Svelte components, you'll need to configure `*`.`core`.`customFileTypes` to associate the appropriate file extension with the `text.html.basic` language. For example, to associate `.svelte`, put this in your `config.cson`:
37+
38+
```cson
39+
"*":
40+
core:
41+
customFileTypes:
42+
"text.html.basic": [
43+
"svelte"
44+
]
45+
```
46+
47+
Then, you'll need to tell linter-eslint to also lint HTML files: add `source.html` to the list of scopes to run ESLint on in the linter-eslint settings.
48+
49+
Reload Atom and give it a go!
50+
51+
# Sublime Text
52+
53+
You'll need the [SublimeLinter](https://github.com/SublimeLinter/SublimeLinter) and [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) packages installed.
54+
55+
Unless you're using `.html` for your Svelte components, you'll need to configure Sublime to associate the appropriate file extension with the `text.html` syntax. Open any Svelte component, and go to **View > Syntax > Open all with current extension as... > HTML**.
56+
57+
Then, you'll need to tell SublimeLinter-eslint to lint entire files with the `text.html` syntax, and not just the contents of their `<script>` tags (which is the default). In your SublimeLinter configuration, you'll need to add `text.html` to `linters`.`eslint`.`selector`. If you're starting with the default values, this would mean:
58+
59+
```json
60+
{
61+
"linters": {
62+
"eslint": {
63+
"selector": "source.js - meta.attribute-with-value, text.html"
64+
}
65+
}
66+
}
67+
```
68+
69+
Reload Sublime and give it a go!
70+
71+
# Vim
72+
73+
You'll need the [ALE (Asynchronous Lint Engine)](https://github.com/w0rp/ale) plugin installed.
74+
75+
Unless you're using `.html` for your Svelte components, you'll need to configure Vim to associate the appropriate file extension with the `html` syntax. For example, to associate `.svelte`, put this in your `.vimrc`:
76+
77+
```vim
78+
au BufNewFile,BufRead,BufReadPost *.svelte set syntax=html
79+
```
80+
81+
Then you'll need to tell ALE to lint and fix `.svelte` files using ESLint, so put this in your `.vimrc`:
82+
83+
```vim
84+
let g:ale_linter_aliases = {
85+
\ 'svelte': ['javascript']
86+
\}
87+
let g:ale_linters = {
88+
\ 'svelte': ['eslint']
89+
\}
90+
let g:ale_fixers = {
91+
\ 'svelte': ['eslint']
92+
\}
93+
```
94+
95+
Reload Vim and give it a go!
96+
97+
# Other integrations?
98+
99+
If you've gotten this plugin to work with other editors, please let us know!

‎README.md

Lines changed: 3 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -57,113 +57,15 @@ This can be `true` or `false` or a function that accepts an object of attributes
5757

5858
The default is to not ignore any styles.
5959

60-
## Integration
60+
## Using the CLI
6161

6262
It's probably a good idea to make sure you can lint from the command line before proceeding with configuring your editor.
6363

64-
### CLI
65-
6664
Using this with the command line `eslint` tool shouldn't require any special actions. Just remember that if you are running `eslint` on a directory, you need to pass it the `--ext` flag to tell it which nonstandard file extensions you want to lint.
6765

68-
### Visual Studio Code
69-
70-
You'll need the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension installed.
71-
72-
Unless you're using `.html` for your Svelte components, you'll need to configure `files.associations` to associate the appropriate file extension with the `html` language. For example, to associate `.svelte`, put this in your `settings.json`:
73-
74-
```json
75-
{
76-
"files.associations": {
77-
"*.svelte": "html"
78-
}
79-
}
80-
```
81-
82-
Then, you'll need to tell the ESLint extension to also lint files with language `html` and to enable autofixing where possible. If you haven't adjusted the `eslint.validate` setting, it defaults to `[ "javascript", "javascriptreact" ]`, so put this in your `settings.json`:
83-
84-
```json
85-
{
86-
"eslint.validate": [
87-
"javascript",
88-
"javascriptreact",
89-
{
90-
"language": "html",
91-
"autoFix": true
92-
}
93-
]
94-
}
95-
```
96-
97-
Reload VS Code and give it a go!
98-
99-
### Atom
100-
101-
You'll need the [linter](https://atom.io/packages/linter) and [linter-eslint](https://atom.io/packages/linter-eslint) packages installed.
102-
103-
Unless you're using `.html` for your Svelte components, you'll need to configure `*`.`core`.`customFileTypes` to associate the appropriate file extension with the `text.html.basic` language. For example, to associate `.svelte`, put this in your `config.cson`:
104-
105-
```cson
106-
"*":
107-
core:
108-
customFileTypes:
109-
"text.html.basic": [
110-
"svelte"
111-
]
112-
```
113-
114-
Then, you'll need to tell linter-eslint to also lint HTML files: add `source.html` to the list of scopes to run ESLint on in the linter-eslint settings.
115-
116-
Reload Atom and give it a go!
117-
118-
### Sublime Text
119-
120-
You'll need the [SublimeLinter](https://github.com/SublimeLinter/SublimeLinter) and [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) packages installed.
121-
122-
Unless you're using `.html` for your Svelte components, you'll need to configure Sublime to associate the appropriate file extension with the `text.html` syntax. Open any Svelte component, and go to **View > Syntax > Open all with current extension as... > HTML**.
123-
124-
Then, you'll need to tell SublimeLinter-eslint to lint entire files with the `text.html` syntax, and not just the contents of their `<script>` tags (which is the default). In your SublimeLinter configuration, you'll need to add `text.html` to `linters`.`eslint`.`selector`. If you're starting with the default values, this would mean:
125-
126-
```json
127-
{
128-
"linters": {
129-
"eslint": {
130-
"selector": "source.js - meta.attribute-with-value, text.html"
131-
}
132-
}
133-
}
134-
```
135-
136-
Reload Sublime and give it a go!
137-
138-
### Vim
139-
140-
You'll need the [ALE (Asynchronous Lint Engine)](https://github.com/w0rp/ale) plugin installed.
141-
142-
Unless you're using `.html` for your Svelte components, you'll need to configure Vim to associate the appropriate file extension with the `html` syntax. For example, to associate `.svelte`, put this in your `.vimrc`:
143-
144-
```vim
145-
au BufNewFile,BufRead,BufReadPost *.svelte set syntax=html
146-
```
147-
148-
Then you'll need to tell ALE to lint and fix `.svelte` files using ESLint, so put this in your `.vimrc`:
149-
150-
```vim
151-
let g:ale_linter_aliases = {
152-
\ 'svelte': ['javascript']
153-
\}
154-
let g:ale_linters = {
155-
\ 'svelte': ['eslint']
156-
\}
157-
let g:ale_fixers = {
158-
\ 'svelte': ['eslint']
159-
\}
160-
```
161-
162-
Reload Vim and give it a go!
163-
164-
### Other integrations
66+
## Integrations
16567

166-
If you've gotten this plugin to work with other editors, please let us know!
68+
See [INTEGRATIONS.md](INTEGRATIONS.md) for how to use this plugin with your text editor.
16769

16870
## License
16971

0 commit comments

Comments
 (0)