Skip to content

1.0 | Project structure

Jump to bottom
Rácz Zalán edited this page Nov 25, 2023 · 2 revisions

Tree view of the project structure

📂WebGL-GLSL-Editor
├── 📂.github
│   ├── 📂workflows
│   │   ├── 📄build-and-package.yml
│   │   ├── 📄publish.yml
├── 📂.husky
├── 📂.vscode
│   ├── 📄extensions.json
│   ├── 📄launch.json
│   ├── 📄settings.json
│   ├── 📄tasks.json
├── 🗀dist
├── 🗀node_modules
├── 📂res
│   ├── 📂bin
│   ├── 📂gif
│   ├── 📂js
│   ├── 📂png
│   ├── 📂svg
│   ├── 📂xhtml
├── 📂src
│   ├── 🗀_generated
├── 📂syntaxes
│   ├── 🗀.antlr
│   ├── 📄AntlrGlslLexer.g4
│   ├── 📄AntlrGlslParser.g4
│   ├── 📄glsl.language.json
│   ├── 📄html-injected-glsl.language.json
│   ├── 📄js-injected-glsl.language.json
│   ├── 📄ts-injected-glsl.language.json
├── 📂vscodeignore
│   ├── 📄linux.vscodeignore
│   ├── 📄mac.vscodeignore
│   ├── 📄universal.vscodeignore
│   ├── 📄web.vscodeignore
│   ├── 📄windows.vscodeignore
├── 📄.editorconfig
├── 📄.eslintrc.js
├── 📄.gitattributes
├── 📄.gitignore
├── 📄.markdownlint.json
├── 📄.prettierignore
├── 📄.prettierrc.json
├── 📄.vscodeignore
├── 📄BUILD.md
├── 📄CHANGELOG.md
├── 📄compile-antlr.ps1
├── 📄compile-antlr.sh
├── 📄language-configuration.json
├── 📄LICENSE.txt
├── 📄package-lock.json
├── 📄package.json
├── 📄README.md
├── 📄snippets.json
├── 📄tsconfig.json
└── 📄webpack.config.js

Legend

  • 📂Regular folder
  • 🗀A folder that contains generated files, build artifacts, or downloadable packages
  • 📄File

Files and folders

This section describes the more important files and folders in the project.

The .github/workflows folder contains the configurations of the GitHub Actions CI, and CD pipelines. The build-and-package.yml file configures the CI pipeline, which runs on Pull Requests, and checks the code with static analysis tools, while publish.yml configures the CD pipeline, which runs on releases, and publishes the extension to the Visual Studio Marketplace.

The .husky folder contains configurations about the pre-commit hook, and you never have to touch these files.

The .vscode folder contains VS Code-specific configurations. The extensions.json contains the recommended extensions to this project, VS Code will offer you to install them when you open the workspace. The launch.json contains configurations about how to start VS Code, when you want to run either the web or the desktop extension. The settings.json contains workspace-specific settings, for example, to make Prettier the default formatter. The tasks.json contains configurations about tasks like how to build the code.

The dist folder will contain both the desktop and the web extensions' final JavaScript code and the mappings to the original TypeScript source code, after you build the extension.

The node_modules folder will contain the project's dependencies, defined in the package.json file.

The res folder contains the resources that you want to include in the packages. The bin folder contains the binary files, namely the platform-specific executables of glslang. The gif, and the png/screenshots folders contain illustrations for the README.md file, while the png folder also contains the extension's icon. The svg folder contains the GLSL files' icon. The xhtml folder contains the GLSL ES-related documentation pages from docs.gl.

The src folder contains the extension's source code, mostly the programmatic language features, and the _generated folder contains the code, generated by ANTLR.

The syntaxes folder contains the ANTLR lexer and parser grammars: AntlrGlslLexer.g4, and AntlrGlslParser.g4, and the files needed for the code generation in the .antlr folder. Also, the syntaxes folder contains the TextMate grammars for syntax highlight: glsl.language.json for the main coloring, while html-injected-glsl.language.json, js-injected-glsl.language.json, and ts-injected-glsl.language.json for the coloring in HTML, JavaScript, and TypeScript files.

The vscodeignore folder contains the configurations of which files to include in the extension packages, based on the target: linux.vscodeignore, mac.vscodeignore, universal.vscodeignore, web.vscodeignore, and windows.vscodeignore.

The .editorconfig, .prettierignore, and the .prettierrc.json files configure formatting. The .eslintrc.js, and the .markdownlint.json files configure the static analysis tools. The .gitignore, and the .gitattributes files configure git, describing what files to include in commits and how to handle newline characters.

The .vscodeignore file is basically a safeguard, which makes packaging fail if you use the default configuration. Instead, use the packaging scripts defined in the package.json file, which uses the real configurations in the vscodeignore folder.

The README.md file contains the description of the extension, the CHANGELOG.md file the detailed list of changes for each version, the BUILD.md file is there for legacy reasons, use this wiki instead, and the LICENSE.txt file contains the extension's license.

The compile-antlr.ps1, and the compile-antlr.sh files generate code by using ANTLR.

The language-configuration.json file defines declarative language features, for example, it tells VS Code, how to comment out a line, and the snippets.json file defines small code snippets that will appear when you request code completion.

The tsconfig.json configures the TypeScript Compiler, and the webpack.config.js file configures Webpack how to build and bundle the source code.

The package.json file is the heart of the extension, and it contains many things. It defines the project's dependencies, scripts, and metadata, for example, the extension's name, version, commands, file extensions, keywords, and a lot more. The package-lock.json is a generated file, and you shouldn't modify it. It ensures consistent builds.

Useful resources

Clone this wiki locally