Skip to content

Commit

Permalink
Moved general information about Javascript to the top of the document…
Browse files Browse the repository at this point in the history
…ation
  • Loading branch information
HoffmannP authored and BerengarWLehr committed Sep 18, 2023
1 parent aef365e commit 286fd67
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 73 deletions.
50 changes: 49 additions & 1 deletion docs/guides/javascript/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -552,4 +552,52 @@ grunt
</TabItem>
</Tabs>

### ESLint
### JSHint

[JSHint](http://jshint.com) is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.

Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.

#### Use

Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.

To run jshint on the command line, simply pass it the file that you wish to check:

```bash
npx jshint blocks/fruit/yui/fruitbowl/fruitbowl.js
```

#### Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

- [JSHint](http://jshint.com)
- [JSLint Error Explanations](http://jslinterrors.com)

## Moodle Settings for JavaScript Development

The following settings will ensure that the js loaded by your browser is relatively readable.

Make sure that :

- your Development / Debugging / Debug messages is set to "Developer : Extra Debug Moodle Messages ...." - Moodle will then use the debug non-minified and thus more readable YUI 2 and YUI 3 library files.
- You will probably want to change some of the settings at "Home / Site administration / Appearance / AJAX and JavaScript" :
- YUI combo loading - you probably want to turn this off so that files are not combined.
- JavaScript caching and compressing - turn this off so that your custom JS code is not minified.
- Check the other settings on this page to see that they are as you would expect them to be.

You might want to add the following code to your config.php file when developing or debugging JavaScript code:

```php
// For javascript development or debugging.
$CFG->cachejs = false;
$CFG->yuicomboloading = false;
$CFG->yuiloglevel = 'debug';
$CFG->debug = 32767;
```

## See Also

- [JavaScript Modules](../modules.md)
- [JavaScript FAQ](https://docs.moodle.org/dev/JavaScript_FAQ)
73 changes: 1 addition & 72 deletions docs/guides/javascript/yui/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,75 +99,4 @@ Some good books:

## Useful tools

JavaScript authoring have moved along considerably in recent years, and we highly recommend that you look at using some of the available tools to help you in your development. Most of these tools are available through [Node.js](http://nodejs.org) which is relatively trivial to install on most operating systems:

### Grunt

Moodle uses [Grunt](../index.md#grunt) for most JavaScript management. We recommend reading our Grunt documentation for further information on the available commands.

#### Use

There are several ways to use `grunt`.

During development, we recommend you run grunt in _watch_ mode:

```bash
npx grunt watch
```

To build all YUI modules across Moodle you can call `grunt` by running the following command from the root directory:

```bash
npx grunt yui
```

### JSHint

[JSHint](http://jshint.com) is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.

Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.

#### Use

Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.

To run jshint on the command line, simply pass it the file that you wish to check:

```bash
npx jshint blocks/fruit/yui/fruitbowl/fruitbowl.js
```

#### Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

- [JSHint](http://jshint.com)
- [JSLint Error Explanations](http://jslinterrors.com)

## Moodle Settings for JavaScript Development

The following settings will ensure that the js loaded by your browser is relatively readable.

Make sure that :

- your Development / Debugging / Debug messages is set to "Developer : Extra Debug Moodle Messages ...." - Moodle will then use the debug non-minified and thus more readable YUI 2 and YUI 3 library files.
- You will probably want to change some of the settings at "Home / Site administration / Appearance / AJAX and JavaScript" :
- YUI combo loading - you probably want to turn this off so that files are not combined.
- JavaScript caching and compressing - turn this off so that your custom JS code is not minified.
- Check the other settings on this page to see that they are as you would expect them to be.

You might want to add the following code to your config.php file when developing or debugging JavaScript code:

```php
// For javascript development or debugging.
$CFG->cachejs = false;
$CFG->yuicomboloading = false;
$CFG->yuiloglevel = 'debug';
$CFG->debug = 32767;
```

## See Also

- [JavaScript Modules](../modules.md)
- [jQuery](../jquery/index.md)
- [JavaScript FAQ](https://docs.moodle.org/dev/JavaScript_FAQ)
The usefull hints you previously found here are moved to [another place](https://moodledev.io/docs/guides/javascript#tools)

0 comments on commit 286fd67

Please sign in to comment.