@@ -73,11 +73,100 @@ Now it supports Angular control flow.
7373}
7474```
7575
76- ## How to use
76+ ## Angular Imports Folding
77+
78+ This package now includes functionality to fold import statements and import arrays in Angular TypeScript files to improve code readability.
79+
80+ ### Features
81+
82+ - ** Optional Automatic Folding** : When enabled, automatically folds import statements and import arrays when opening ` .ts ` files
83+ - ** Separate Control** : Independent commands to fold/unfold import statements vs import arrays
84+ - ** Smart Detection** : Groups import statements intelligently and only processes Angular files for import arrays
85+ - ** Manual Commands** : Multiple commands for fine-grained control
86+ - ** Non-Intrusive** : Auto-folding is disabled by default and must be explicitly enabled
87+
88+ ### Usage
89+
90+ #### Enable Auto-Folding
91+
92+ Auto-folding is ** disabled by default** . To enable it:
93+
94+ 1 . Go to ` Preferences > Package Settings > NgxHTML > Settings `
95+ 2 . Set ` "auto_fold_angular_imports": true `
96+
97+ #### Manual Commands
98+
99+ Access these commands via Command Palette (` Ctrl+Shift+P ` / ` Cmd+Shift+P ` ):
100+
101+ - ** Angular Imports: Fold Import Statements** - Fold import statements at top of file
102+ - ** Angular Imports: Fold Import Arrays** - Fold imports arrays in Angular decorators
103+ - ** Angular Imports: Fold All Imports** - Fold both import statements and arrays
104+ - ** Angular Imports: Unfold Import Statements** - Unfold import statements only
105+ - ** Angular Imports: Unfold Import Arrays** - Unfold import arrays only
106+ - ** Angular Imports: Unfold All Imports** - Unfold everything
107+
108+ #### How It Works
109+
110+ ** Import Statements Folding** :
111+ 1 . Processes all ` .ts ` files
112+ 2 . Finds import statements at the top of the file
113+ 3 . Groups consecutive imports, separated by blank lines or comments
114+ 4 . Leaves the first import of each group visible
115+
116+ ** Import Arrays Folding** :
117+ 1 . Looks for ` @Component ` or ` @Directive ` decorators
118+ 2 . Finds ` imports: [ ` patterns within decorators
119+ 3 . Folds the content between the brackets
120+
121+ #### Examples
122+
123+ ** Import Statements (Before)** :
124+ ``` typescript
125+ import { CommonModule } from ' @angular/common'
126+ import { FormsModule } from ' @angular/forms'
127+ import { MatButtonModule } from ' @angular/material/button'
128+
129+ import { MyService } from ' ./my-service'
130+ import { UtilsService } from ' ../utils/utils.service'
131+ ```
132+
133+ ** Import Statements (After)** :
134+ ``` typescript
135+ import { CommonModule } from ' @angular/common'
136+ [•••]
137+
138+ import { MyService } from ' ./my-service'
139+ [•••]
140+ ```
141+
142+ ** Import Arrays (Before)** :
143+ ``` typescript
144+ @Component ({
145+ selector: ' app-example'
146+ imports: [
147+ CommonModule ,
148+ FormsModule ,
149+ MatButtonModule ,
150+ MyComponent
151+ ],
152+ templateUrl: ' ./example.component.html'
153+ })
154+ ```
155+
156+ ** Import Arrays (After)** :
157+ ``` typescript
158+ @Component ({
159+ selector: ' app-example'
160+ imports: [•••],
161+ templateUrl: ' ./example.component.html'
162+ })
163+ ```
164+
165+ ## How to use syntax
77166
78167The syntax is listed as ` Ngx HTML ` in Sublime syntax selection list.
79168
80- I personaly use [ ApplySyntax] ( https://github.com/facelessuser/ApplySyntax ) plugin
169+ You could use [ ApplySyntax] ( https://github.com/facelessuser/ApplySyntax ) plugin
81170with the following setting:
82171
83172``` json
@@ -90,4 +179,4 @@ with the following setting:
90179```
91180
92181You could use it in other ways...
93- e.g. set it as the default syntax for all html files, since it's a superset of the html syntax anyway.
182+ e.g. set it as the default syntax for all html files, since it's a superset of the default html syntax anyway.
0 commit comments