Environment setup
- Install Vue syntax support for your editor if it does not have it by default (Vetur for VS Code, language-vue for Atom)
Add the following to your config.php, they will enable more efficient development:
Code Block $CFG->cachejs = false; $CFG->forced>force_plugin_settings['totara_tui'] = [ 'cache_js' => false, // Disable JS caching of Tui JS 'cache_scss' => false, // Disable JS caching of Tui CSS 'development_mode' => true, // Put Tui into development mode so that you get non-minified source ];
Editor setup
VS Code
- Syntax highlighting: Install Vetur - to enable syntax highlighting for the lang-strings block follow the instructions on the Vetur website, adding a "lang-strings": "json" mapping, then running "Vetur: Generate grammar from
vetur.grammar.customBlocks" and restarting VS Code - Install Prettier and ESLint plugins (optional)
PhpStorm/WebStorm
- Vue.js syntax highlighting is built into PHPStorm
- The ESlint plugin is built in and supported out of the box
- Enable JSON syntax highling of the custom lang-strings block:
- When looking at a .vue file with a language block
- Right click one of the strings within the <lang-strings> tag
- Click "Show context actions"
- Click "Inject language or reference"
- Type "JSON" and select the JSON option
- Install Prettier plugin (optional)
- To enable format-on-save (optional), go to Preferences > Tools > File watchers and create a new file watcher with the following options:
- File type: Vue.js Template
- Scope: Project Files
- Program: $ProjectFileDir$/node_modules/.bin/prettier
- Arguments: --write $FilePathRelativeToProjectRoot$
Atom
- Syntax highlighting: Install language-vue
- Install Prettier and ESLint plugins (optional)
Linting and formatting
We use Prettier to format code and components. This removes the need to discuss style in code review, improves efficiency and makes our code more consistent with third party-code and documentation.
The expectation is that code will be formatted with Prettier prior to opening a PR, and ideally, prior to committing.
ESLint is used to catch issues that aren't related to formatting.
To run these, you have a few options:
- Install ESLint and Prettier plugins in your editor and configure it to format on save or on demand
The following commands can be used to run lint
Code Block // The following will report any style problems npm run tui-style // The following will fix any style problems for you (handy huh!) npm run tui-style-fix
The following command will install a git hook that will automatically lint and format for you when you commit code
Code Block npm run setup-hooks