Skip to content

Commit

Permalink
vscode-bicep hygiene (#14590)
Browse files Browse the repository at this point in the history
Once #14584 is merged we should
consider merging `vscode-bicep-ui` and `vscode-bicep` and configure it
with npm workspaces. The PR cleans up the `vscode-bicep` project to make
sure we have consistent linter rules and formatter settings to make it
easier to merge the folders.

Changes:
- Consolidated TypeScript config files.
- Updated ESLint rules.
  - Made rules less strict overall.
  - Removed the annoying Prettier formatting related rules.
- ⭐**No more yellow or red squiggly line related to formatting
violations**.
  - Cleaned up all stale linter rule disabling comments.
- Updated prettier configuration
- Changed printWidth from `80` to `120` since we all have modern
high-resolution and ultra-wide monitors :p
  - Added a plugin for automatically sort imports.
- ❗**Formatted all code under vscode-bicep, which accounts for 99% of
the file changes**.
- Fixed a critical Webpack bundling circular dependency warning.
- Added CI steps for formatting the `vscode-bicep` folder.
  • Loading branch information
shenglol authored Jul 19, 2024
1 parent 132ade5 commit 5d3615c
Show file tree
Hide file tree
Showing 130 changed files with 2,132 additions and 3,968 deletions.
4 changes: 3 additions & 1 deletion .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
},
Expand Down
14 changes: 7 additions & 7 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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: |
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -717,7 +717,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
Expand Down
22 changes: 17 additions & 5 deletions .github/workflows/run-formatter.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 0 additions & 4 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -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"
},
Expand Down
34 changes: 34 additions & 0 deletions src/vscode-bicep/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -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.",
],
],
},
};
63 changes: 0 additions & 63 deletions src/vscode-bicep/.eslintrc.js

This file was deleted.

13 changes: 13 additions & 0 deletions src/vscode-bicep/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"printWidth": 120,
"plugins": ["@ianvs/prettier-plugin-sort-imports"],
"importOrder": [
"<TYPES>^(node:)",
"<TYPES>",
"<TYPES>^[.]",
"",
"<BUILTIN_MODULES>",
"<THIRD_PARTY_MODULES>",
"^[./]"
]
}
2 changes: 1 addition & 1 deletion src/vscode-bicep/.vscode/tasks.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
{
"label": "build:e2e:dev",
"type": "typescript",
"tsconfig": "tsconfig.e2e.dev.json",
"tsconfig": "tsconfig.e2e.json",
"problemMatcher": "$tsc",
"group": "build",
"presentation": {
Expand Down
2 changes: 0 additions & 2 deletions src/vscode-bicep/.vscodeignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
20 changes: 10 additions & 10 deletions src/vscode-bicep/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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]": {
Expand All @@ -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

Expand All @@ -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)
Original file line number Diff line number Diff line change
@@ -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)
Original file line number Diff line number Diff line change
@@ -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)
Loading

0 comments on commit 5d3615c

Please sign in to comment.