vscode-bicep hygiene

.devcontainer/devcontainer.json

@@ -12,7 +12,9 @@
         "editorconfig.editorconfig",
         "github.vscode-pull-request-github",
         "github.vscode-github-actions",
-        "ms-dotnettools.csdevkit"
+        "ms-dotnettools.csdevkit",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
       ]
     }
   },

.github/workflows/build.yml

@@ -101,7 +101,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Setup .NET Core
         uses: actions/setup-dotnet@v4
@@ -161,7 +161,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Setup .NET Core
         uses: actions/setup-dotnet@v4
@@ -364,7 +364,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: npm ci
         if: matrix.runTests
@@ -437,7 +437,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: npm ci
         run: npm ci
@@ -474,7 +474,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: TextMate Grammar
         run: |
@@ -527,7 +527,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Download Bicep CLI
         uses: actions/download-artifact@v4
@@ -714,7 +714,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Setup .NET Core
         uses: actions/setup-dotnet@v4

.github/workflows/run-formatter.yml

@@ -29,12 +29,24 @@ jobs:
 
       - name: Setup .NET
         uses: actions/setup-dotnet@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: npm ci
+        run: npm ci
+        working-directory: ./src/vscode-bicep
 
-      - name: Format
-        run: dotnet format
-
-      - name: Remove unnecessary using directives (IDE0005)
-        run: dotnet format style --diagnostics IDE0005 --severity info
+      - name: Format .NET code
+        run: |
+          dotnet format
+          dotnet format style --diagnostics IDE0005 --severity info
+
+      - name: Format vscode-bicep
+        run: npm run format
+        working-directory: ./src/vscode-bicep
 
       - name: Commit and push formatting updates
         if: (!github.ref_protected)

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
-    "eslint.format.enable": true,
     "eslint.lintTask.enable": true,
-    "[typescript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
-    },
     "yaml.schemas": {
         "https://json.schemastore.org/github-workflow.json": "/.github/workflows/*.yml"
     },

src/vscode-bicep/.eslintrc.cjs

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+module.exports = {
+  root: true,
+  ignorePatterns: ["out/**/*", ".eslintrc.cjs", "webpack.config.ts", "jest.config.*.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  plugins: ["header", "@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:jest/recommended",
+    "plugin:jest/style",
+  ],
+  rules: {
+    "header/header": [
+      2,
+      "line",
+      [
+        " Copyright (c) Microsoft Corporation.",
+        " Licensed under the MIT License.",
+      ],
+    ],
+  },
+};

src/vscode-bicep/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "<TYPES>^(node:)",
+    "<TYPES>",
+    "<TYPES>^[.]",
+    "",
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]"
+  ]
+}

src/vscode-bicep/.vscode/tasks.json

@@ -104,7 +104,7 @@
     {
       "label": "build:e2e:dev",
       "type": "typescript",
-      "tsconfig": "tsconfig.e2e.dev.json",
+      "tsconfig": "tsconfig.e2e.json",
       "problemMatcher": "$tsc",
       "group": "build",
       "presentation": {

src/vscode-bicep/.vscodeignore

@@ -11,10 +11,8 @@ readme-links/
 .vscodeignore
 webpack.config.ts
 tsconfig.e2e.json
-tsconfig.e2e.dev.json
 tsconfig.json
 package.params.json
-enableParams.js
 jest.config.e2e.js
 jest.config.unit.js
 jest.config.snapshot.js

src/vscode-bicep/README.md

@@ -32,9 +32,9 @@ Easily explore all available resource types and api versions for a given type. Y
 
 ### Other intellisense and completions
 
-* Keyword declarations. On an empty line you will get completions for all keywords (`param`, `var`, `resource`, etc.)
-* `param` and `output` types (i.e. `param myParam `)
-* target scopes (i.e. `targetScope = `)
+- Keyword declarations. On an empty line you will get completions for all keywords (`param`, `var`, `resource`, etc.)
+- `param` and `output` types (i.e. `param myParam `)
+- target scopes (i.e. `targetScope = `)
 
 ### Snippets
 
@@ -78,12 +78,12 @@ You can rename any symbol such as a `param` or `resource` and bicep will intelli
 
 ### Formatting
 
-* Default keybinding is `alt` + `shift` + `f` on Windows, `option` + `shift` + `f` on macOS
-  * You can also format via the VS Code UI. `View` -> `Command palette...` then type `format document`
+- Default keybinding is `alt` + `shift` + `f` on Windows, `option` + `shift` + `f` on macOS
+  - You can also format via the VS Code UI. `View` -> `Command palette...` then type `format document`
 
 ![formatting a bicep file that is disorganized](/docs/images/format.gif)
 
-* Bicep will set the following default settings for `.bicep` files when installed:
+- Bicep will set the following default settings for `.bicep` files when installed:
 
 ```json
   "[bicep]": {
@@ -94,9 +94,9 @@ You can rename any symbol such as a `param` or `resource` and bicep will intelli
 
 You can change the default settings in the following places (sorted by precedence in ascending order):
 
-* VSCode global user settings
-* VSCode workspace settings
-* `.editorconfig` files (requires EditorConfig for VSCode extension to be installed)
+- VSCode global user settings
+- VSCode workspace settings
+- `.editorconfig` files (requires EditorConfig for VSCode extension to be installed)
 
 ### Quick fixes
 
@@ -110,4 +110,4 @@ For small issues like misspelled symbols or incorrect casing, bicep will offer a
 
 Use the "Insert Resource" command to quickly import a resource from Azure into a Bicep file.
 
-![Insert resource command](/src/vscode-bicep/readme-links/insertresource.gif)
+![Insert resource command](/src/vscode-bicep/readme-links/insertresource.gif)

src/vscode-bicep/media/walkthroughs/gettingStarted/2_Type_Params.md

@@ -1,17 +1,21 @@
 # Add parameters to your Bicep file
 
-* First, create a parameter named location:
+- First, create a parameter named location:
+
 ```bicep
 param location string = resourceGroup().location
 ```
-* Next, create a parameter named 'appPlanName':
+
+- Next, create a parameter named 'appPlanName':
+
 ```bicep
 param appPlanName string = '${uniqueString(resourceGroup().id)}plan'
 ```
 
 These parameters will be used to fill in attributes in your resources.
 
 <!--- See https://github.com/Microsoft/vscode/issues/69757 for details of how to pass arguments -->
+
 [Copy code to clipboard](command:bicep.gettingStarted.copyToClipboard?%7B%22step%22%3A%22params%22%7D)
 
 ![Typing parameters into Bicep](2_Type_Params.gif)

src/vscode-bicep/media/walkthroughs/gettingStarted/3_Type_Resources.md

@@ -1,14 +1,15 @@
 # Add resources to your Bicep file
 
-* First, type `'appplan'` to view the 'Application Service Plan' resource snippet and press Tab or Enter. Press Tab to jump to the `name` attribute and replace its value with the parameter `appPlanName`.
+- First, type `'appplan'` to view the 'Application Service Plan' resource snippet and press Tab or Enter. Press Tab to jump to the `name` attribute and replace its value with the parameter `appPlanName`.
 
-* Next, type `'storage'` to view the 'Storage Account' resource snippet and press Tab or Enter. Replace the `name` attribute's value with `'${appServicePlan.name}storage'` (including the single quotes).
+- Next, type `'storage'` to view the 'Storage Account' resource snippet and press Tab or Enter. Replace the `name` attribute's value with `'${appServicePlan.name}storage'` (including the single quotes).
 
-* Save the file.
+- Save the file.
 
 Feel free to search for other snippets that suit your needs.
 
 <!--- See https://github.com/Microsoft/vscode/issues/69757 for details of how to pass arguments -->
+
 [Copy code to clipboard](command:bicep.gettingStarted.copyToClipboard?%7B%22step%22%3A%22resources%22%7D)
 
 ![Typing resources into Bicep file](3_Type_Resources.gif)