書籍の教材データをDLし、使用しようとしたところ、原因不明のエラー：is not defined　が発生して困っています

前提・実現したいこと

『jQuary　最高の教科書』の教材データにおいて、進めていたところ4章の箇所でエラーが発生するトラブルがありました。
エラー発生ポイントはコード中に記載の通りになります。
このエラーの原因特定と、対処法を知りたいです。

ご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

ERROR='$' is not defined.[no-undef]

該当コード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>Chapter 04-01 &#xB7; jQuery 最高の教科書</title>
8 <link rel="stylesheet" href="./css/normalize.css">
9 <link rel="stylesheet" href="./css/main.css">
10
11 <script src="./js/vendor/jquery-1.10.2.min.js"></script>
12 <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
13 <script src="./js/main.js"></script>
14</head>
15
16<body>
17
18 <header class="page-header" role="banner">
19  <h1>Creative jQuery Sample</h1>
20 </header>
21
22 <div class="page-main" role="main">
23
24  <div id="buttons1">
25   <h2>BUTTONS1</h2>
26   <div class="inner clearfix">
27    <button>Albatross</button>
28    <button>Bishop</button>
29    <button>Canary</button>
30    <button>Duck</button>
31    <button>Eagle</button>
32    <button>Falcon</button>
33    <button>Goose</button>
34    <button>Hawk</button>
35    <button>Ibis<span class="bg"><span>Ibis</span></span></button>
36    <button>Jaeger<span class="bg"><span>Jaeger</span></span></button>
37    <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button>
38    <button>Lark<span class="bg"><span>Lark</span></span></button>
39   </div>
40  </div>
41
42 </div>
43
44 <footer class="page-footer" role="contentinfo">
45  <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
46 </footer>
47
48</body>
49
50</html>
51

該当のソースコード

js
1$(function () {/*エラー*/
2
3 var duration = 300;
4
5 // buttons1 ----------------------------------------
6 // buttons1  1行目
7 $('#buttons1 button:nth-child(-n+4)')/*エラー*/
8  .on('mouseover', function () {
9   $(this).stop(true).animate({/*エラー*/
10    backgroundColor: '#ae5e9b',
11    color: '#fff'
12   }, duration);
13  })
14  .on('mouseout', function () {
15   $(this).stop(true).animate({/*エラー*/
16    backgroundColor: '#fff',
17    color: '#ebc000'
18   }, duration);
19  });
20
21 // buttons1  2行目
22 $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')/*エラー*/
23  .on('mouseover', function () {
24   $(this).stop(true).animate({/*エラー*/
25    borderWidth: '12px',
26    color: '#ae5e9b'
27   }, duration, 'easeOutSine');
28  })
29  .on('mouseout', function () {
30   $(this).stop(true).animate({/*エラー*/
31    borderWidth: '0px',
32    color: '#ebc000'
33   }, duration, 'easeOutSine');
34  });
35
36 // buttons1  3行目
37 $('#buttons1 button:nth-child(n+9)')/*エラー*/
38  .on('mouseover', function () {
39   $(this).find('> span')/*エラー*/
40    .stop(true).animate({
41     width: '100%'
42    }, duration, 'easeOutQuad');
43  })
44  .on('mouseout', function () {
45   $(this).find('> span')/*エラー*/
46    .stop(true).animate({
47     width: '0%'
48    }, duration, 'easeOutQuad');
49  });
50
51});
52

試したこと

①手書きで一から書き直す
→変化なし

②window.addEventListener('DOMContentLoaded', function(){
/** jQueryの処理 */
});を追加
参考サイト：https://pisuke-code.com/jquery-is-not-defined-solution/
→エラーは次のように変化　parsing error unexpected token

③データ自体がおかしいのか？
→以前に一度は正しく開けたし、ネット上でもデータ不良の情報は見受けられないためこの可能性は限りなく低いと思われる

参考サイト様

https://techacademy.jp/magazine/28188#:~:text=defined%E3%80%8D%E3%81%A8%E3%81%AF-,%E3%80%8C'%E5%A4%89%E6%95%B0%E5%90%8D%2F%E9%96%A2%E6%95%B0%E5%90%8D'%20is%20not%20defined%E3%80%8D,%E3%81%8C%E6%AD%A2%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

https://ja.stackoverflow.com/questions/7641/is-not-defined%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95

https://qiita.com/komatsuuuuuna/items/97d9284b716c22782f72
『jQuary　最高の教科書』データダウンロード　公式様↓
https://www.sbcr.jp/support/11493/

※今回の該当箇所はこのデータ内の
sampledate > chapter4 > 01 > js > main.js

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

追加情報

##追記
本当に何度も恐れ入ります????質問者です。
コードを入れたいのでこちらから失礼します。
カンマがあることはわかったのですが、main.jsに「linting.collapsed":true」は見つけられないのでどこを見たら見つけられるのかお聞きしたかったのです。

最後がカンマであるというならば、私の脳内に浮かぶ「最後」は以下のように考えるのですが、どうにも違う気がします。

 $('#buttons1 button:nth-child(n+9)')/*エラー*/
  .on('mouseover', function () {
   $(this).find('> span')/*エラー*/
    .stop(true).animate({
     width: '100%'
    }, duration, 'easeOutQuad');
  })
  .on('mouseout', function () {
   $(this).find('> span')/*エラー*/
    .stop(true).animate({
     width: '0%'
    }, duration, 'easeOutQuad');←ここ？
  });←ここ？

});←ここ？

int32_t

2021/02/25 02:37

HTMLはどのようになっていますか?

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／