Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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:

    $CFG->cachejs = false;
$CFG->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

    // 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

    npm run setup-hooks
  • No labels