ESLint: enable prefer-template rule

.eslintrc.json

@@ -46,6 +46,7 @@
       "error",
       "after"
     ],
+    "prefer-template": "error",
     "semi": [
       "error",
       "never"

build/build-plugins.js

@@ -16,7 +16,7 @@ const { babel } = require('@rollup/plugin-babel')
 const banner = require('./banner.js')
 
 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(sourcePath + '/**/*.js')
+const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
 
 // Array which holds the resolved plugins
 const resolvedPlugins = []

js/src/util/index.js

@@ -17,7 +17,7 @@ const TRANSITION_END = 'transitionend'
 const parseSelector = selector => {
   if (selector && window.CSS && window.CSS.escape) {
     // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
-    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id))
+    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
   }
 
   return selector

js/tests/karma.conf.js

@@ -105,7 +105,7 @@ if (BROWSERSTACK) {
   config.browserStack = {
     username: ENV.BROWSER_STACK_USERNAME,
     accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
-    build: `bootstrap-${ENV.GITHUB_SHA ? ENV.GITHUB_SHA.slice(0, 7) + '-' : ''}${new Date().toISOString()}`,
+    build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`,
     project: 'Bootstrap',
     retryLimit: 2
   }

js/tests/unit/collapse.spec.js

@@ -897,7 +897,7 @@ describe('Collapse', () => {
         const trigger2 = fixtureEl.querySelector('#trigger2')
         const trigger3 = fixtureEl.querySelector('#trigger3')
         const target1 = fixtureEl.querySelector('#test1')
-        const target2 = fixtureEl.querySelector('#' + CSS.escape('0/my/id'))
+        const target2 = fixtureEl.querySelector(`#${CSS.escape('0/my/id')}`)
 
         const target2Shown = () => {
           expect(trigger1).not.toHaveClass('collapsed')

js/tests/unit/tab.spec.js

@@ -207,7 +207,7 @@ describe('Tab', () => {
       const tab = new Tab(profileTriggerEl)
 
       profileTriggerEl.addEventListener('shown.bs.tab', () => {
-        expect(fixtureEl.querySelector('#' + CSS.escape('2'))).toHaveClass('active')
+        expect(fixtureEl.querySelector(`#${CSS.escape('2')}`)).toHaveClass('active')
         done()
       })
 

js/tests/unit/util/config.spec.js

@@ -128,7 +128,7 @@ describe('Config', () => {
       const obj = new DummyConfigClass()
       expect(() => {
         obj._typeCheckConfig(config)
-      }).toThrowError(TypeError, obj.constructor.NAME.toUpperCase() + ': Option "parent" provided type "number" but expected type "(string|element)".')
+      }).toThrowError(TypeError, `${obj.constructor.NAME.toUpperCase()}: Option "parent" provided type "number" but expected type "(string|element)".`)
     })
 
     it('should return null stringified when null is passed', () => {

js/tests/visual/carousel.html

@@ -55,7 +55,7 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
       // Test to show that transition-duration can be changed with css
       carousel.addEventListener('slid.bs.carousel', event => {
         t1 = performance.now()
-        console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ' + event.timeStamp)
+        console.log(`transition-duration took ${t1 - t0}ms, slid at ${event.timeStamp}`)
       })
       carousel.addEventListener('slide.bs.carousel', () => {
         t0 = performance.now()

js/tests/visual/modal.html

@@ -264,7 +264,7 @@ <h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1>
 
       slowModal.addEventListener('shown.bs.modal', () => {
         t1 = performance.now()
-        console.log('transition-duration took ' + (t1 - t0) + 'ms.')
+        console.log(`transition-duration took ${t1 - t0}ms.`)
       })
 
       slowModal.addEventListener('show.bs.modal', () => {