-
Notifications
You must be signed in to change notification settings - Fork 2
/
settings.json
181 lines (181 loc) · 7.04 KB
/
settings.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
{
"eslint.enable": true,
"javascript.referencesCodeLens.showOnAllFunctions": true,
"editor.tabSize": 2,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true
},
// Enable the extension (it can be omitted)
"htmlConfigurableAutocomplete.enable": true,
// Enable verbose logging
"htmlConfigurableAutocomplete.debug": true,
// Tell it how to autocomplete HTML content
"htmlConfigurableAutocomplete.completionItemProviders": [
{
// Can be omitted
"enable": true,
// It should be activated when < is pressed (for tag names)
"triggerCharacters": [
"<"
],
// Then look into js files in the components directory
"includeGlobPattern": "src/components/**/*.js",
// Find the component name in there and show it as a completion item
"contentRegexp": "@Component\\(\\s*['\"]([a-z-]+)",
// It should have this icon
"itemKind": "Constant"
},
{
// Can be omitted
"enable": true,
// It should also be activated when space is pressed (for attributes)
"triggerCharacters": [
" "
],
// But just when the cursor is in an element tag, at a position where an attribute name can be inserted
"triggerRegexp": "<[a-z-]+(\\s+[a-z-]+(=\".*?\")?)*[^\"<>]*",
// Show a couple statically-defined completion items
"staticItems": [
"data-for",
"data-if"
],
// We're typing an attribute name here, so let's help the user by adding ="" right after. The cursor will stop in between double quotes
"completionItemSuffix": "=\"\t\"",
// They should have this icon
"itemKind": "Enum"
},
{
// Can be omitted
"enable": true,
// It should also be activated when space is pressed (for attributes)
"triggerCharacters": [
"{"
],
// But just when the cursor is inside an element with the data-for attribute
"triggerRegexp": "data-for=.*?>.*{{",
// Before executing triggerRexep though, flatten the HTML of the current document
"triggerTransformer": "flatten-html",
// Show a couple statically-defined completion items
"staticItems": [
"$item",
"$index"
],
// They should have this icon
"itemKind": "Enum"
},
{
// Can be omitted
"enable": true,
// It should also be activated when space is pressed (for attributes)
"triggerCharacters": [
" "
],
// But just when the cursor is in an element tag, at a position where an attribute name can be inserted
"triggerRegexp": "<[a-z-]+(\\s+[a-z-]+(=\".*?\")?)*[^\"<>]*",
// Let's go look for this component definition and get its public fields (the definition is found thanks to the definition provider configured below)
"includeGlobPattern": "${definitionFilePath}",
// Transform original JavaScript content into a list of class and member definitions
"contentTransformer": "es6-module-nodes",
// And inside of it, look for setter methods
"contentRegexp": "instance public set ([a-z0-9_]+)",
// JavaScript properties are in camel case, so we transform them in kebab case since they will be used as element attributes
"completionItemTransformer": "camelcase-to-kebabcase",
// We're typing an attribute name here, so let's help the user by adding ="" right after. The cursor will stop in between double quotes
"completionItemSuffix": "=\"\t\"",
// They should have this icon
"itemKind": "Field"
},
{
// Fixed config
"enable": true,
// It should also be activated when { is pressed (for moustached syntax)
"triggerCharacters": [
"{", " "
],
// But just when two { have been typed already
"triggerRegexp": "{{\\s*",
// This is a global property we can use in the html views
"staticItems": [
"localization"
],
"completionItemSuffix": ".",
// It should have this icon
"itemKind": "Constant"
},
{
// Can be omitted
"enable": true,
// It should also be activated when { or . is pressed
"triggerCharacters": [
"{", "."
],
// But just when two { have been typed already and also when 'localization' has been typed
"triggerRegexp": "{{\\s*localization\\.([^} ]*)",
// Go look inside the localization JSON file
"includeGlobPattern": "src/localization[.]json",
// Transform JSON content to a flattened hierarchy
"contentTransformer": "flatten-json",
// And inside of it, look for properties. The $1 placeholder will be substituted by the capture in triggerRegexp (i.e. what the user typed)
"contentRegexp": " $1([a-z0-9_]+)",
// It should have this icon
"itemKind": "Field"
},
{
// Can be omitted
"enable": true,
// It should also be activated when { is pressed (for moustached syntax)
"triggerCharacters": [
"{"
],
// But just when two { have been typed already
"triggerRegexp": "{{",
// Go look inside a js file that has the same name and lives in the same directory
"includeGlobPattern": "${dirPath}${fileNameWithoutExtension}[.]js",
// Transform JS content as a list of class and members definitions
"contentTransformer": "es6-module-nodes",
// And inside of it, look for properties
"contentRegexp": "instance public property ([a-z0-9_]+)",
// It should have this icon
"itemKind": "Field"
}
],
// Now tell it how to navigate to definitions
"htmlConfigurableAutocomplete.definitionProviders": [
{
// Can be omitted
"enable": true,
// Definitions are provided when the cursor is on tag names having a - in them
"definitionRegexp": "</?([a-z]+-[a-z]+)[^>]*",
// Then go look inside js files that live in the components directory
"includeGlobPattern": "src/components/**/*.js",
// And find that very same tag name in them; if one is found, VSCode navigates to definition!
"contentRegexp": "@Component\\(\\s*['\"]([a-z-]+)"
},
{
// Can be omitted
"enable": true,
// Definitions are provided when the cursor is inside moustaches
"definitionRegexp": "{{\\s*(.+?)\\s*}}",
// Then go look inside js file that lives in the same directory and has the same name with the js extension
"includeGlobPattern": "${dirPath}${fileNameWithoutExtension}[.]js",
// Then find the field it's referring to
"contentRegexp": "^\\s*([a-z0-9_]+)\\s*;?\\s*$"
}
],
// Tell it how to find references (i.e. usages) in the project
"htmlConfigurableAutocomplete.referenceProviders": [
{
// Can be omitted
"enable": true,
// Get the name of the component so we can find references in the project
"referenceRegexp": "@Component\\(\\s*['\"]([a-z-]+)",
// Look for references inside HTML files
"includeGlobPattern": "src/components/**/*.html",
// References look like tag elements with a - in their name
"contentRegexp": "<([a-z]+-[a-z]+)"
}
]
}