Multiple scripts in html

eslint-plugin-html

A ESLint plugin to lint and fix inline scripts contained in HTML files.

• Usage
• Disabling ESLint
• Linting HTML
• Multiple scripts tags in a HTML file
  • History
  • html/html-extensions
  • html/xml-extensions
  • html/indent
  • html/report-bad-indent
  • html/javascript-tag-names
  • html/javascript-mime-types
  • No file linted when running eslint on a directory
  • Linting templates (or PHP)
  • Linting VUE files
  • To v4
  • To v3

  Usage

  Simply install via npm install —save-dev eslint-plugin-html and add the plugin to your ESLint configuration. See ESLint documentation.

  Disabling ESLint

  To temporarily disable ESLint, use the HTML comment. Re-enable it with . Example:

  To disable ESLint for the next script tag only, use the HTML comment. Example:

  Disabled script tags are completely ignored: their content will not be parsed as JavaScript. You can use this to disable script tags containing template syntax.

  Linting HTML

  This plugin focuses on applying ESLint rules on inline scripts contained in HTML. It does not provide any rule related to HTML. For that, you can use other plugins like @eslint-html or @angular-eslint. eslint-plugin-html is compatible with those plugins and can be used along them.

  Multiple scripts tags in a HTML file

  When linting a HTML with multiple script tags, this plugin tries to emulate the browser behavior by sharing the global scope between scripts by default. This behavior doesn’t apply to «module» scripts (ie: and most transpiled code), where each script tag gets its own top-level scope.

  ESLint has already an option to tell the parser if the script are modules. eslint-plugin-html will use this option as well to know if the scopes should be shared (the default) or not. To change this, just set it in your ESLint configuration:

  To illustrate this behavior, consider this HTML extract:

  script> var foo = 1 script> script> alert(foo) script>

  This is perfectly valid by default, and the ESLint rules no-unused-vars and no-undef shouldn’t complain. But if those scripts are considerated as ES modules, no-unused-vars should report an error in the first script, and no-undef should report an error in the second script.

  History

  In eslint-plugin-html v1 and v2, script code were concatenated and linted in a single pass, so the scope were always shared. This caused some issues, so in v3 all scripts were linted separately, and scopes were never shared. In v4, the plugin still lint scripts separately, but makes sure global variables are declared and used correctly in the non-module case.

  XML support

  This plugin parses HTML and XML markup slightly differently, mainly when considering CDATA sections:

  • in XML, any data inside a CDATA section will be considered as raw text (not XML) and the CDATA delimiter will be droped ;
  • in HTML, there is no such thing for tags: the CDATA delimiter is considered as normal text and thus, part of the script.

  Settings

  Note: all settings can be written either as «html/key»: value or in a nested object «html»:

  html/html-extensions

  By default, this plugin will only consider files ending with those extensions as HTML: .erb , .handlebars , .hbs , .htm , .html , .mustache , .nunjucks , .php , .tag , .twig , .we . You can set your own list of HTML extensions by using this setting. Example:

   "plugins": [ "html" ], "settings":  "html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML > >

  html/xml-extensions

  By default, this plugin will only consider files ending with those extensions as XML: .xhtml , .xml . You can set your own list of XML extensions by using this setting. Example:

   "plugins": [ "html" ], "settings":  "html/xml-extensions": [".html"], // consider .html files as XML > >

  html/indent

  By default, the code between tags is dedented according to the first non-empty line. The setting html/indent allows to ensure that every script tags follow an uniform indentation. Like the indent rule, you can pass a number of spaces, or «tab» to indent with one tab. Prefix this value with a + to be relative to the tag indentation. Example:

   "plugins": [ "html" ], "settings":  "html/indent": "0", // code should start at the beginning of the line (no initial indentation). "html/indent": "+2", // indentation is the indentation plus two spaces. "html/indent": "tab", // indentation is one tab at the beginning of the line. > >

  html/report-bad-indent

  By default, this plugin won’t warn if it encounters a problematic indentation (ex: a line is under indented). If you want to make sure the indentation is correct, use the html/report-bad-indent in conjunction with the indent rule. Pass «warn» or 1 to display warnings, «error» or 2 to display errors. Example:

   "plugins": [ "html" ], "settings":  "html/report-bad-indent": "error", > >

  html/javascript-tag-names

  By default, the code between tags is considered as JavaScript. You can customize which tags should be considered JavaScript by providing one or multiple tag names.

   "plugins": [ "html" ], "settings":  "html/javascript-tag-names": ["script", "customscript"], > >

  html/javascript-mime-types

  By default, the code between tags is considered as JavaScript code only if there is no type attribute or if its value matches the pattern (application|text)/(x-)?(javascript|babel|ecmascript-6) or module (case insensitive). You can customize the types that should be considered as JavaScript by providing one or multiple MIME types. If a MIME type starts with a / , it will be considered as a regular expression. Example:

   "plugins": [ "html" ], "settings":  "html/javascript-mime-types": ["text/javascript", "text/jsx"], // also use script tags with a "text/jsx" type attribute "html/javascript-mime-types": "/^text\\/(javascript|jsx)$/", // same thing > >

  Troubleshooting

  No file linted when running eslint on a directory

  By default, when executing the eslint command on a directory, only .js files will be linted. You will have to specify extra extensions with the —ext option. Example: eslint —ext .html,.js src will lint both .html and .js files in the src directory. See ESLint documentation.

  Linting templates (or PHP)

  eslint-plugin-html won’t evaluate or remove your template markup. If you have template markup in your script tags, the resulting script may not be valid JavaScript, so ESLint will fail to parse it. Here are some workarounds:

  • You can use HTML comments to disable ESLint for specific script tags.
  • For PHP, you can use eslint-plugin-php-markup to lint php files, it use a same way to process php markup like eslint-plugin-html .
  • Another possible hacky workaround to make sure the code is valid JavaScript is to put your template markup inside a comment. When the template is rendered, the generated JS code must start with a new line, so it will be written below the comment. PHP example:

  script> var mydata // console.log(mydata) script>

  Linting VUE files

  Initially, eslint-plugin-vue was using eslint-plugin-html to lint code inside script tags. Since v3, eslint-plugin-vue is using its own parser, so it is incompatible with eslint-plugin-html . You should use eslint-plugin-vue exclusively and remove eslint-plugin-html from your dependencies if you still have it.

  Migration from older versions

  To v4

  eslint-plugin-html v4 requires at least ESLint v4.7. This is because a lot of internal changes occured in ESLint v4.7, including a new API to support autofixing in preprocessors. If you are still using an older version of ESLint, please consider upgrading, or keep using eslint-plugin-html v3.

  The big feature (and breaking change) in eslint-plugin-html v4 is the ability to choose how scopes are shared between script tags in the same HTML file.

  To v3

  If you are considering upgrading to v3, please read this guide.

  Credits

  A big thank you to @kuceb for the logo image!

  Источник

  HTML script Tag

  The following is an example of an HTML page that contains the JavaScript code in a tag.

  DOCTYPE html> html> head> head> body> h1> JavaScript Tutorialsh1> script> //write JavaScript code here.. alert('Hello, how are you?') script> body> html> 

  In the above example, a tag contains the JavaScript alert(‘Hello, how are you?’) that display a message box.

  HTML v4 requires the type attribute to identify the language of script code embedded within script tag. This is specified as MIME type e.g. ‘text/javascript’, ‘text/ecmascript’, ‘text/vbscript’, etc.

  HTML v5 page does not require the type attribute because the default script language is ‘text/javascript’ in a tag.

  An HTML page can contain multiple tags in the or tag. The browser executes all the script tags, starting from the first script tag from the beginning.

  Scripts without async , defer or type=»module» attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. Consider the following page with multiple script tags.

  DOCTYPE html> html> head> script> alert('Executing JavaScript 1') script> head> body> h1> JavaScript Tutorialsh1> script> alert('Executing JavaScript 2') script> p>This page contains multiple script tags.p> script> alert('Executing JavaScript 3') script> body> html> 

  Above, the first tag containing alert(‘Executing JavaScript 1’) will be executed first, then alert(‘Executing JavaScript 2’) will be executed, and then alert(‘Executing JavaScript 3’) will be executed.

  The browser loads all the scripts included in the tag before loading and rendering the tag elements. So, always include JavaScript files/code in the that are going to be used while rendering the UI. All other scripts should be placed before the ending tag. This way, you can increase the page loading speed.

  Reference the External Script File

  A tag can also be used to include an external script file to an HTML web page by using the src attribute.

  If you don’t want to write inline JavaScript code in the tag, then you can also write JavaScript code in a separate file with .js extension and include it in a web page using tag and reference the file via src attribute.

  DOCTYPE html> html> head> script src="/MyJavaScriptFile.js" >script> head> body> h1> JavaScript Tutorialsh1> body> html> 

  Above, the points to the external JavaScript file using the src=»https://www.tutorialsteacher.com/MyJavaScriptFile.js» attribute where the value of the src attribute is the path or url from which a file needs to be loaded in the browser. Note that you can load the files from your domain as well as other domains.

  Global Attributes

  The can contain the following global attributes:

  Attribute	Usage
  async	executes the script asynchronously along with the rest of the page.
  crossorign	allows error logging for sites which use a separate domain for static media. Value anonymous do not send credentials, whereas use-credentials sends the credentials.
  defer	executes the script after the document is parsed and before firing DOMContentLoaded event.
  src	specifies the URI/path of an external script file;
  type	specifies the type of the containing script e.g. text\javascript, text\html, text\plain, application\json, application\pdf, etc.
  referrerpolicy	specifies which referrer information to send when fetching a script. Values can be no-referrer, no-referrer-when-downgrade, origin, same-origin, strict-origin, etc.
  integrity	specifies that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation.
  nomodule	specifies that the script should not be executed in browsers supporting ES2015 modules.

  Источник

  Читайте также:  Java set and order