teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ESLintで () 内のインデントが希望通りに設定できない

編集履歴

質問編集履歴

5

Airbinのスタイルを使っていることを記述

2018/09/09 16:04

投稿

kinchiki
kinchiki

スコア11

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,10 @@
24
24
 
25
25
 
26
26
 
27
+ eslintのスタイルはAirbnbを選択しています。
28
+
29
+
30
+
27
31
  ```
28
32
 
29
33
  $ vue create test-app
@@ -92,9 +96,9 @@
92
96
 
93
97
 
94
98
 
95
- `"indent": 0` ならエラーは消えましたが、無効にはしたくないので、うまくルールを設定したいのです。
99
+ `"indent": 0` ならエラーは消えましたが、無効にはしたくないので、上手くルールを設定したいです。
100
+
96
-
101
+ スタイルをAirbnbから変えるという方法はできるだけしたくありませんが、そうすることも視野に入れています。
97
-
98
102
 
99
103
 
100
104
 

4

参考ページを載せる

2018/09/09 16:04

投稿

kinchiki
kinchiki

スコア11

test CHANGED
@@ -1 +1 @@
1
- ESLintのインデントで () 内のオブジェクトの要求されるスペースが期待通りにできない
1
+ ESLintで () 内のインデントが希望通りに設定できない
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
 
46
46
 
47
- ### 希望するインデント
47
+ ### lint前の希望するインデントとエラー
48
48
 
49
49
  コメントはeslintのエラー内容です。
50
50
 
@@ -66,7 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- ### eslint修正後コード
69
+ ### lint後のコード
70
70
 
71
71
  ```js
72
72
 
@@ -84,6 +84,8 @@
84
84
 
85
85
 
86
86
 
87
+
88
+
87
89
  ## 試したこと
88
90
 
89
91
  `package.json` に以下のようなrulesを追加しましたが、どれも期待通りにはなりませんでした。
@@ -110,9 +112,9 @@
110
112
 
111
113
 
112
114
 
113
-
115
+ ## ファイルの中身
114
-
116
+
115
- ## package.json
117
+ ### package.json
116
118
 
117
119
  ```json
118
120
 
@@ -332,7 +334,7 @@
332
334
 
333
335
 
334
336
 
335
- ## Home.vue (エラーが出るファイル)
337
+ ### Home.vue (エラーが出るファイル)
336
338
 
337
339
  ```js
338
340
 
@@ -373,3 +375,15 @@
373
375
  </script>
374
376
 
375
377
  ```
378
+
379
+
380
+
381
+
382
+
383
+ ## 参考にしたページ
384
+
385
+ [indent - Rules - ESLint - Pluggable JavaScript linter](https://eslint.org/docs/rules/indent)
386
+
387
+ [eslintで、怒られないコードを書く - Qiita](https://qiita.com/nogson/items/e5c8c5e6be994a3c9a14)
388
+
389
+ [ESLintについてのメモ - Qiita](https://qiita.com/makotot/items/822f592ff8470408be18)

3

2018/08/18 14:22

投稿

kinchiki
kinchiki

スコア11

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
 
4
4
 
5
+ ## やりたいこと
6
+
7
+ 希望通りのインデントになるように、ESLintのルールを設定したいです。
8
+
9
+
10
+
11
+
12
+
5
13
  ## 環境
6
14
 
7
15
  - yarn: v1.9.4
@@ -16,7 +24,7 @@
16
24
 
17
25
 
18
26
 
19
- ```sh
27
+ ```
20
28
 
21
29
  $ vue create test-app
22
30
 
@@ -30,9 +38,7 @@
30
38
 
31
39
  ## 現象
32
40
 
33
- ESLint を使うと、引数のインデントが全て、スペース2つに修正されてしまいます。
41
+ lintのエラーが出て、auto-fixすると()内のインデントが閉じカッコ含めて全てスペース2つに修正されてしまいます。
34
-
35
- Lintを無効にはしたくないので、うまくルールを設定したいのですが、どうすればよいでしょうか？
36
42
 
37
43
 
38
44
 
@@ -84,7 +90,7 @@
84
90
 
85
91
 
86
92
 
87
- `"indent": 0` ならエラーは消えましたが、使いたくありません。
93
+ `"indent": 0` ならエラーは消えましたが、無効にはしたくないので、うまくルールを設定したいのです。
88
94
 
89
95
 
90
96
 

2

2018/08/18 12:20

投稿

kinchiki
kinchiki

スコア11

test CHANGED
File without changes
test CHANGED
@@ -48,314 +48,314 @@
48
48
 
49
49
  @Component({
50
50
 
51
- component: {
51
+ components: {
52
-
52
+
53
- 'Hello world', // [eslint] Expected indentation of 2 spaces but found 4. (indent)
53
+ Helloworld, // [eslint] Expected indentation of 2 spaces but found 4. (indent)
54
+
55
+ },
56
+
57
+ }) // [eslint] Expected indentation of 2 spaces but found 0. (indent)
58
+
59
+ ```
60
+
61
+
62
+
63
+ ### eslint修正後コード
64
+
65
+ ```js
66
+
67
+ @Component({
68
+
69
+ components: {
70
+
71
+ HelloWorld,
72
+
73
+ },
74
+
75
+ })
76
+
77
+ ```
78
+
79
+
80
+
81
+ ## 試したこと
82
+
83
+ `package.json` に以下のようなrulesを追加しましたが、どれも期待通りにはなりませんでした。
84
+
85
+
86
+
87
+ `"indent": 0` ならエラーは消えましたが、使いたくありません。
88
+
89
+
90
+
91
+
92
+
93
+ ```json
94
+
95
+ // "rules"
96
+
97
+ "indent": ["error", 2, { "ObjectExpression": 1 }]
98
+
99
+ "indent": ["error", 2, { "CallExpression": {"arguments": 1} }],
100
+
101
+ "indent": ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]
102
+
103
+ ```
104
+
105
+
106
+
107
+
108
+
109
+ ## package.json
110
+
111
+ ```json
112
+
113
+ {
114
+
115
+ "name": "test-app",
116
+
117
+ "version": "0.1.0",
118
+
119
+ "private": true,
120
+
121
+ "scripts": {
122
+
123
+ "serve": "vue-cli-service serve",
124
+
125
+ "build": "vue-cli-service build",
126
+
127
+ "lint": "vue-cli-service lint",
128
+
129
+ "test:unit": "vue-cli-service test:unit"
130
+
131
+ },
132
+
133
+ "dependencies": {
134
+
135
+ "register-service-worker": "^1.0.0",
136
+
137
+ "vue": "^2.5.17",
138
+
139
+ "vue-class-component": "^6.0.0",
140
+
141
+ "vue-property-decorator": "^7.0.0",
142
+
143
+ "vue-router": "^3.0.1",
144
+
145
+ "vuetify": "^1.0.19",
146
+
147
+ "vuex": "^3.0.1"
148
+
149
+ },
150
+
151
+ "devDependencies": {
152
+
153
+ "@babel/polyfill": "^7.0.0-beta.49",
154
+
155
+ "@types/jest": "^23.1.4",
156
+
157
+ "@vue/cli-plugin-babel": "^3.0.0",
158
+
159
+ "@vue/cli-plugin-eslint": "^3.0.0",
160
+
161
+ "@vue/cli-plugin-pwa": "^3.0.0",
162
+
163
+ "@vue/cli-plugin-typescript": "^3.0.0",
164
+
165
+ "@vue/cli-plugin-unit-jest": "^3.0.0",
166
+
167
+ "@vue/cli-service": "^3.0.0",
168
+
169
+ "@vue/eslint-config-airbnb": "^3.0.0",
170
+
171
+ "@vue/eslint-config-typescript": "^3.0.0",
172
+
173
+ "@vue/test-utils": "^1.0.0-beta.20",
174
+
175
+ "babel-core": "7.0.0-bridge.0",
176
+
177
+ "lint-staged": "^7.2.0",
178
+
179
+ "node-sass": "^4.9.0",
180
+
181
+ "sass-loader": "^7.0.1",
182
+
183
+ "ts-jest": "^23.0.0",
184
+
185
+ "typescript": "^3.0.0",
186
+
187
+ "vue-cli-plugin-vuetify": "^0.1.6",
188
+
189
+ "vue-template-compiler": "^2.5.17"
190
+
191
+ },
192
+
193
+ "eslintConfig": {
194
+
195
+ "root": true,
196
+
197
+ "env": {
198
+
199
+ "node": true
200
+
201
+ },
202
+
203
+ "extends": [
204
+
205
+ "plugin:vue/essential",
206
+
207
+ "@vue/airbnb",
208
+
209
+ "@vue/typescript"
210
+
211
+ ],
212
+
213
+ "rules": {
214
+
215
+ "indent": ["error", 2, { "ObjectExpression": 1 }]
216
+
217
+ },
218
+
219
+ "parserOptions": {
220
+
221
+ "parser": "typescript-eslint-parser"
222
+
223
+ }
224
+
225
+ },
226
+
227
+ "postcss": {
228
+
229
+ "plugins": {
230
+
231
+ "autoprefixer": {}
232
+
233
+ }
234
+
235
+ },
236
+
237
+ "browserslist": [
238
+
239
+ "> 1%",
240
+
241
+ "last 2 versions",
242
+
243
+ "not ie <= 8"
244
+
245
+ ],
246
+
247
+ "jest": {
248
+
249
+ "moduleFileExtensions": [
250
+
251
+ "js",
252
+
253
+ "jsx",
254
+
255
+ "json",
256
+
257
+ "vue",
258
+
259
+ "ts",
260
+
261
+ "tsx"
262
+
263
+ ],
264
+
265
+ "transform": {
266
+
267
+ "^.+\.vue$": "vue-jest",
268
+
269
+ ".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
270
+
271
+ "^.+\.tsx?$": "ts-jest"
272
+
273
+ },
274
+
275
+ "moduleNameMapper": {
276
+
277
+ "^@/(.*)$": "<rootDir>/src/$1"
278
+
279
+ },
280
+
281
+ "snapshotSerializers": [
282
+
283
+ "jest-serializer-vue"
284
+
285
+ ],
286
+
287
+ "testMatch": [
288
+
289
+ "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
290
+
291
+ ],
292
+
293
+ "testURL": "http://localhost/"
294
+
295
+ },
296
+
297
+ "gitHooks": {
298
+
299
+ "pre-commit": "lint-staged"
300
+
301
+ },
302
+
303
+ "lint-staged": {
304
+
305
+ "*.js": [
306
+
307
+ "vue-cli-service lint",
308
+
309
+ "git add"
310
+
311
+ ],
312
+
313
+ "*.vue": [
314
+
315
+ "vue-cli-service lint",
316
+
317
+ "git add"
318
+
319
+ ]
54
320
 
55
321
  }
56
322
 
57
- }) // [eslint] Expected indentation of 2 spaces but found 0. (indent)
323
+ }
58
-
324
+
59
- ```
325
+ ```
60
-
61
-
62
-
326
+
327
+
328
+
63
- ### eslint修正後コード
329
+ ## Home.vue (エラーが出るファイル)
64
330
 
65
331
  ```js
66
332
 
333
+ <template>
334
+
335
+ <div class="home">
336
+
337
+ <img alt="Vue logo" src="../assets/logo.png">
338
+
339
+ <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
340
+
341
+ </div>
342
+
343
+ </template>
344
+
345
+
346
+
347
+ <script lang="ts">
348
+
349
+ import { Component, Vue } from 'vue-property-decorator';
350
+
351
+ import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
352
+
353
+
354
+
67
355
  @Component({
68
356
 
69
357
  components: {
70
358
 
71
- HelloWorld,
72
-
73
- },
74
-
75
- })
76
-
77
- ```
78
-
79
-
80
-
81
- ## 試したこと
82
-
83
- `package.json` に以下のようなrulesを追加しましたが、どれも期待通りにはなりませんでした。
84
-
85
-
86
-
87
- `"indent": 0` ならエラーは消えましたが、使いたくありません。
88
-
89
-
90
-
91
-
92
-
93
- ```json
94
-
95
- // "rules"
96
-
97
- "indent": ["error", 2, { "ObjectExpression": 1 }]
98
-
99
- "indent": ["error", 2, { "CallExpression": {"arguments": 1} }],
100
-
101
- "indent": ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]
102
-
103
- ```
104
-
105
-
106
-
107
-
108
-
109
- ## package.json
110
-
111
- ```json
112
-
113
- {
114
-
115
- "name": "test-app",
116
-
117
- "version": "0.1.0",
118
-
119
- "private": true,
120
-
121
- "scripts": {
122
-
123
- "serve": "vue-cli-service serve",
124
-
125
- "build": "vue-cli-service build",
126
-
127
- "lint": "vue-cli-service lint",
128
-
129
- "test:unit": "vue-cli-service test:unit"
130
-
131
- },
132
-
133
- "dependencies": {
134
-
135
- "register-service-worker": "^1.0.0",
136
-
137
- "vue": "^2.5.17",
138
-
139
- "vue-class-component": "^6.0.0",
140
-
141
- "vue-property-decorator": "^7.0.0",
142
-
143
- "vue-router": "^3.0.1",
144
-
145
- "vuetify": "^1.0.19",
146
-
147
- "vuex": "^3.0.1"
148
-
149
- },
150
-
151
- "devDependencies": {
152
-
153
- "@babel/polyfill": "^7.0.0-beta.49",
154
-
155
- "@types/jest": "^23.1.4",
156
-
157
- "@vue/cli-plugin-babel": "^3.0.0",
158
-
159
- "@vue/cli-plugin-eslint": "^3.0.0",
160
-
161
- "@vue/cli-plugin-pwa": "^3.0.0",
162
-
163
- "@vue/cli-plugin-typescript": "^3.0.0",
164
-
165
- "@vue/cli-plugin-unit-jest": "^3.0.0",
166
-
167
- "@vue/cli-service": "^3.0.0",
168
-
169
- "@vue/eslint-config-airbnb": "^3.0.0",
170
-
171
- "@vue/eslint-config-typescript": "^3.0.0",
172
-
173
- "@vue/test-utils": "^1.0.0-beta.20",
174
-
175
- "babel-core": "7.0.0-bridge.0",
176
-
177
- "lint-staged": "^7.2.0",
178
-
179
- "node-sass": "^4.9.0",
180
-
181
- "sass-loader": "^7.0.1",
182
-
183
- "ts-jest": "^23.0.0",
184
-
185
- "typescript": "^3.0.0",
186
-
187
- "vue-cli-plugin-vuetify": "^0.1.6",
188
-
189
- "vue-template-compiler": "^2.5.17"
190
-
191
- },
192
-
193
- "eslintConfig": {
194
-
195
- "root": true,
196
-
197
- "env": {
198
-
199
- "node": true
200
-
201
- },
202
-
203
- "extends": [
204
-
205
- "plugin:vue/essential",
206
-
207
- "@vue/airbnb",
208
-
209
- "@vue/typescript"
210
-
211
- ],
212
-
213
- "rules": {
214
-
215
- "indent": ["error", 2, { "ObjectExpression": 1 }]
216
-
217
- },
218
-
219
- "parserOptions": {
220
-
221
- "parser": "typescript-eslint-parser"
222
-
223
- }
224
-
225
- },
226
-
227
- "postcss": {
228
-
229
- "plugins": {
230
-
231
- "autoprefixer": {}
232
-
233
- }
234
-
235
- },
236
-
237
- "browserslist": [
238
-
239
- "> 1%",
240
-
241
- "last 2 versions",
242
-
243
- "not ie <= 8"
244
-
245
- ],
246
-
247
- "jest": {
248
-
249
- "moduleFileExtensions": [
250
-
251
- "js",
252
-
253
- "jsx",
254
-
255
- "json",
256
-
257
- "vue",
258
-
259
- "ts",
260
-
261
- "tsx"
262
-
263
- ],
264
-
265
- "transform": {
266
-
267
- "^.+\.vue$": "vue-jest",
268
-
269
- ".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
270
-
271
- "^.+\.tsx?$": "ts-jest"
272
-
273
- },
274
-
275
- "moduleNameMapper": {
276
-
277
- "^@/(.*)$": "<rootDir>/src/$1"
278
-
279
- },
280
-
281
- "snapshotSerializers": [
282
-
283
- "jest-serializer-vue"
284
-
285
- ],
286
-
287
- "testMatch": [
288
-
289
- "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
290
-
291
- ],
292
-
293
- "testURL": "http://localhost/"
294
-
295
- },
296
-
297
- "gitHooks": {
298
-
299
- "pre-commit": "lint-staged"
300
-
301
- },
302
-
303
- "lint-staged": {
304
-
305
- "*.js": [
306
-
307
- "vue-cli-service lint",
308
-
309
- "git add"
310
-
311
- ],
312
-
313
- "*.vue": [
314
-
315
- "vue-cli-service lint",
316
-
317
- "git add"
318
-
319
- ]
320
-
321
- }
322
-
323
- }
324
-
325
- ```
326
-
327
-
328
-
329
- ## Home.vue (エラーが出るファイル)
330
-
331
- ```js
332
-
333
- <template>
334
-
335
- <div class="home">
336
-
337
- <img alt="Vue logo" src="../assets/logo.png">
338
-
339
- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
340
-
341
- </div>
342
-
343
- </template>
344
-
345
-
346
-
347
- <script lang="ts">
348
-
349
- import { Component, Vue } from 'vue-property-decorator';
350
-
351
- import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
352
-
353
-
354
-
355
- @Component({
356
-
357
- components: {
358
-
359
359
  HelloWorld,
360
360
 
361
361
  },

1

2018/08/18 12:15

投稿

kinchiki
kinchiki

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,39 +1,41 @@
1
- ESLintのインデントのルールで困っていることがあり、質問しました。
1
+ ESLintのインデントのルールで困っていることがあり質問しました。
2
+
3
+
4
+
5
+ ## 環境
6
+
7
+ - yarn: v1.9.4
8
+
9
+ - @vue/cli: 3.0.0
10
+
11
+
12
+
13
+ vue-cli 3.0.0でアプリを作成し、vuetifyをaddしています。cliのほとんどの質問？はオンにしました。
14
+
15
+ それ意外のコードは問題箇所以外変えていません。
16
+
17
+
18
+
19
+ ```sh
20
+
21
+ $ vue create test-app
22
+
23
+ $ vue add vuetify
24
+
25
+ ```
26
+
27
+
28
+
29
+
30
+
31
+ ## 現象
32
+
33
+ ESLint を使うと、引数のインデントが全て、スペース2つに修正されてしまいます。
2
34
 
3
35
  Lintを無効にはしたくないので、うまくルールを設定したいのですが、どうすればよいでしょうか？
4
36
 
5
37
 
6
38
 
7
- ## 環境
8
-
9
- - yarn: v1.9.4
10
-
11
- - @vue/cli: 3.0.0
12
-
13
-
14
-
15
- vue-cli 3.0.0でアプリを作成し、vuetifyをaddしています。
16
-
17
- それ意外のコードは変えていません。
18
-
19
-
20
-
21
- ```sh
22
-
23
- $ vue create test-app
24
-
25
- $ vue add vuetify
26
-
27
- ```
28
-
29
-
30
-
31
-
32
-
33
- ## 現象
34
-
35
- ESLint を使うと、引数のインデントが全て、スペース2つに修正されてしまいます。
36
-
37
39
 
38
40
 
39
41
  ### 希望するインデント
@@ -110,7 +112,7 @@
110
112
 
111
113
  {
112
114
 
113
- "name": "av-sommelier",
115
+ "name": "test-app",
114
116
 
115
117
  "version": "0.1.0",
116
118