|
1 |
| -# Create a GitHub Action Using TypeScript |
| 1 | +# VS Code to Visual Studio Theme Converter Action |
2 | 2 |
|
3 |
| -[](https://github.com/super-linter/super-linter) |
4 |
| - |
5 |
| -[](https://github.com/actions/typescript-action/actions/workflows/check-dist.yml) |
6 |
| -[](https://github.com/actions/typescript-action/actions/workflows/codeql-analysis.yml) |
7 |
| -[](./badges/coverage.svg) |
| 3 | +This GitHub Action converts a Visual Studio Code (VS Code) theme to a theme that can be installed in Visual Studio. |
8 | 4 |
|
9 |
| -Use this template to bootstrap the creation of a TypeScript action. :rocket: |
| 5 | +## How it works |
10 | 6 |
|
11 |
| -This template includes compilation support, tests, a validation workflow, |
12 |
| -publishing, and versioning guidance. |
| 7 | +The steps that this action uses for converting a VS Code theme to a Visual Studio VSIX: |
13 | 8 |
|
14 |
| -If you are new, there's also a simpler introduction in the |
15 |
| -[Hello world JavaScript action repository](https://github.com/actions/hello-world-javascript-action). |
| 9 | +1. Clone ThemeConverter repo <https://github.com/microsoft/theme-converter-for-vs> |
| 10 | +2. Build project `dotnet build ThemeConverter.csproj` |
| 11 | +3. Run `bin\Debug\net6.0\ThemeConverter.exe` with extension .json file → creates a .pkgdef file |
| 12 | +4. In VS 2022 create new Empty VSIX Project |
| 13 | +5. Add converted .pkgdef file(s) |
| 14 | +6. Edit the properties of the .pkgdef file: |
16 | 15 |
|
17 |
| -## Create Your Own Action |
| 16 | + a. Set `Copy to Output Directory` to `Copy always`. |
18 | 17 |
|
19 |
| -To create your own action, you can use this repository as a template! Just |
20 |
| -follow the below instructions: |
| 18 | + b. Set `Include in VSIX` to `true`. |
21 | 19 |
|
22 |
| -1. Click the **Use this template** button at the top of the repository |
23 |
| -1. Select **Create a new repository** |
24 |
| -1. Select an owner and name for your new repository |
25 |
| -1. Click **Create repository** |
26 |
| -1. Clone your new repository |
| 20 | + c. Open the `source.extension.vsixmanifest` file, then select Assets, select New. |
27 | 21 |
|
28 |
| -> [!IMPORTANT] |
29 |
| -> |
30 |
| -> Make sure to remove or update the [`CODEOWNERS`](./CODEOWNERS) file! For |
31 |
| -> details on how to use this file, see |
32 |
| -> [About code owners](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners). |
| 22 | + d. Set `Type` to `Microsoft.VisualStudio.VsPackage`, and `Source` to `File on filesystem`. |
33 | 23 |
|
34 |
| -## Initial Setup |
| 24 | + e. Select Browse and select the .pkgdef you added. Select OK. |
35 | 25 |
|
36 |
| -After you've cloned the repository to your local machine or codespace, you'll |
37 |
| -need to perform some initial setup steps before you can develop your action. |
| 26 | + f. Edit other fields in the vsixmanifest as desired (author, version, company, etc). |
38 | 27 |
|
39 |
| -> [!NOTE] |
40 |
| -> |
41 |
| -> You'll need to have a reasonably modern version of |
42 |
| -> [Node.js](https://nodejs.org) handy (20.x or later should work!). If you are |
43 |
| -> using a version manager like [`nodenv`](https://github.com/nodenv/nodenv) or |
44 |
| -> [`nvm`](https://github.com/nvm-sh/nvm), this template has a `.node-version` |
45 |
| -> file at the root of the repository that will be used to automatically switch |
46 |
| -> to the correct version when you `cd` into the repository. Additionally, this |
47 |
| -> `.node-version` file is used by GitHub Actions in any `actions/setup-node` |
48 |
| -> actions. |
| 28 | +7. Build solution → VSIX is in output folder |
49 | 29 |
|
50 |
| -1. :hammer_and_wrench: Install the dependencies |
| 30 | +## Resources |
51 | 31 |
|
52 |
| - ```bash |
53 |
| - npm install |
54 |
| - ``` |
55 |
| - |
56 |
| -1. :building_construction: Package the TypeScript for distribution |
57 |
| - |
58 |
| - ```bash |
59 |
| - npm run bundle |
60 |
| - ``` |
61 |
| - |
62 |
| -1. :white_check_mark: Run the tests |
63 |
| - |
64 |
| - ```bash |
65 |
| - $ npm test |
66 |
| - |
67 |
| - PASS ./index.test.js |
68 |
| - ✓ throws invalid number (3ms) |
69 |
| - ✓ wait 500 ms (504ms) |
70 |
| - ✓ test runs (95ms) |
71 |
| - |
72 |
| - ... |
73 |
| - ``` |
74 |
| - |
75 |
| -## Update the Action Metadata |
76 |
| - |
77 |
| -The [`action.yml`](action.yml) file defines metadata about your action, such as |
78 |
| -input(s) and output(s). For details about this file, see |
79 |
| -[Metadata syntax for GitHub Actions](https://docs.github.com/en/actions/creating-actions/metadata-syntax-for-github-actions). |
80 |
| - |
81 |
| -When you copy this repository, update `action.yml` with the name, description, |
82 |
| -inputs, and outputs for your action. |
83 |
| - |
84 |
| -## Update the Action Code |
85 |
| - |
86 |
| -The [`src/`](./src/) directory is the heart of your action! This contains the |
87 |
| -source code that will be run when your action is invoked. You can replace the |
88 |
| -contents of this directory with your own code. |
89 |
| - |
90 |
| -There are a few things to keep in mind when writing your action code: |
91 |
| - |
92 |
| -- Most GitHub Actions toolkit and CI/CD operations are processed asynchronously. |
93 |
| - In `main.ts`, you will see that the action is run in an `async` function. |
94 |
| - |
95 |
| - ```javascript |
96 |
| - import * as core from '@actions/core' |
97 |
| - //... |
98 |
| - |
99 |
| - async function run() { |
100 |
| - try { |
101 |
| - //... |
102 |
| - } catch (error) { |
103 |
| - core.setFailed(error.message) |
104 |
| - } |
105 |
| - } |
106 |
| - ``` |
107 |
| - |
108 |
| - For more information about the GitHub Actions toolkit, see the |
109 |
| - [documentation](https://github.com/actions/toolkit/blob/master/README.md). |
110 |
| - |
111 |
| -So, what are you waiting for? Go ahead and start customizing your action! |
112 |
| - |
113 |
| -1. Create a new branch |
114 |
| - |
115 |
| - ```bash |
116 |
| - git checkout -b releases/v1 |
117 |
| - ``` |
118 |
| - |
119 |
| -1. Replace the contents of `src/` with your action code |
120 |
| -1. Add tests to `__tests__/` for your source code |
121 |
| -1. Format, test, and build the action |
122 |
| - |
123 |
| - ```bash |
124 |
| - npm run all |
125 |
| - ``` |
126 |
| - |
127 |
| - > This step is important! It will run [`ncc`](https://github.com/vercel/ncc) |
128 |
| - > to build the final JavaScript action code with all dependencies included. |
129 |
| - > If you do not run this step, your action will not work correctly when it is |
130 |
| - > used in a workflow. This step also includes the `--license` option for |
131 |
| - > `ncc`, which will create a license file for all of the production node |
132 |
| - > modules used in your project. |
133 |
| -
|
134 |
| -1. Commit your changes |
135 |
| - |
136 |
| - ```bash |
137 |
| - git add . |
138 |
| - git commit -m "My first action is ready!" |
139 |
| - ``` |
140 |
| - |
141 |
| -1. Push them to your repository |
142 |
| - |
143 |
| - ```bash |
144 |
| - git push -u origin releases/v1 |
145 |
| - ``` |
146 |
| - |
147 |
| -1. Create a pull request and get feedback on your action |
148 |
| -1. Merge the pull request into the `main` branch |
149 |
| - |
150 |
| -Your action is now published! :rocket: |
151 |
| - |
152 |
| -For information about versioning your action, see |
153 |
| -[Versioning](https://github.com/actions/toolkit/blob/master/docs/action-versioning.md) |
154 |
| -in the GitHub Actions toolkit. |
155 |
| - |
156 |
| -## Validate the Action |
157 |
| - |
158 |
| -You can now validate the action by referencing it in a workflow file. For |
159 |
| -example, [`ci.yml`](./.github/workflows/ci.yml) demonstrates how to reference an |
160 |
| -action in the same repository. |
161 |
| - |
162 |
| -```yaml |
163 |
| -steps: |
164 |
| - - name: Checkout |
165 |
| - id: checkout |
166 |
| - uses: actions/checkout@v4 |
167 |
| - |
168 |
| - - name: Test Local Action |
169 |
| - id: test-action |
170 |
| - uses: ./ |
171 |
| - with: |
172 |
| - milliseconds: 1000 |
173 |
| - |
174 |
| - - name: Print Output |
175 |
| - id: output |
176 |
| - run: echo "${{ steps.test-action.outputs.time }}" |
177 |
| -``` |
178 |
| -
|
179 |
| -For example workflow runs, check out the |
180 |
| -[Actions tab](https://github.com/actions/typescript-action/actions)! :rocket: |
181 |
| -
|
182 |
| -## Usage |
183 |
| -
|
184 |
| -After testing, you can create version tag(s) that developers can use to |
185 |
| -reference different stable versions of your action. For more information, see |
186 |
| -[Versioning](https://github.com/actions/toolkit/blob/master/docs/action-versioning.md) |
187 |
| -in the GitHub Actions toolkit. |
188 |
| -
|
189 |
| -To include the action in a workflow in another repository, you can use the |
190 |
| -`uses` syntax with the `@` symbol to reference a specific branch, tag, or commit |
191 |
| -hash. |
192 |
| - |
193 |
| -```yaml |
194 |
| -steps: |
195 |
| - - name: Checkout |
196 |
| - id: checkout |
197 |
| - uses: actions/checkout@v4 |
198 |
| -
|
199 |
| - - name: Test Local Action |
200 |
| - id: test-action |
201 |
| - uses: actions/typescript-action@v1 # Commit with the `v1` tag |
202 |
| - with: |
203 |
| - milliseconds: 1000 |
204 |
| - |
205 |
| - - name: Print Output |
206 |
| - id: output |
207 |
| - run: echo "${{ steps.test-action.outputs.time }}" |
208 |
| -``` |
209 |
| -
|
210 |
| -## Publishing a New Release |
211 |
| -
|
212 |
| -This project includes a helper script, [`script/release`](./script/release) |
213 |
| -designed to streamline the process of tagging and pushing new releases for |
214 |
| -GitHub Actions. |
215 |
| - |
216 |
| -GitHub Actions allows users to select a specific version of the action to use, |
217 |
| -based on release tags. This script simplifies this process by performing the |
218 |
| -following steps: |
219 |
| - |
220 |
| -1. **Retrieving the latest release tag:** The script starts by fetching the most |
221 |
| - recent release tag by looking at the local data available in your repository. |
222 |
| -1. **Prompting for a new release tag:** The user is then prompted to enter a new |
223 |
| - release tag. To assist with this, the script displays the latest release tag |
224 |
| - and provides a regular expression to validate the format of the new tag. |
225 |
| -1. **Tagging the new release:** Once a valid new tag is entered, the script tags |
226 |
| - the new release. |
227 |
| -1. **Pushing the new tag to the remote:** Finally, the script pushes the new tag |
228 |
| - to the remote repository. From here, you will need to create a new release in |
229 |
| - GitHub and users can easily reference the new tag in their workflows. |
| 32 | +- [Bring VS Code Themes to Visual Studio (YouTube video)](https://www.youtube.com/watch?v=2Gwqr5uuBt4) |
| 33 | +- [Microsoft DevBlog post discussing custom Visual Studio themes and the Theme Converter](https://devblogs.microsoft.com/visualstudio/custom-themes/) |
| 34 | +- [theme-converter-for-vs GitHub repo](https://github.com/microsoft/theme-converter-for-vs) |
0 commit comments