VScode配置JavaScript环境

1. 安装Node.js

VScode使用Node.js作为JavaScript的运行环境，因此需要先安装Node.js。

在官网下载对应系统的安装包，安装完成后，在命令行输入以下命令，如果能够正确输出版本号，则表示Node.js安装成功。

node -v

2. 安装VScode插件

打开VScode，搜索并安装以下插件：

- ESLint
- Prettier - Code formatter

这两个插件可以帮助我们在编写JavaScript代码时进行语法检查和格式化。

3. 创建项目

在VScode中新建一个文件夹，作为我们的JavaScript项目的根目录。

然后在命令行进入该文件夹，输入以下命令，初始化一个Node.js项目：

npm init -y

这个命令会创建一个 package.json 文件，用于管理我们项目的依赖包。

4. 安装依赖包

我们需要安装一些依赖包来支持我们的JavaScript项目，包括：

- babel：用于将ES6代码转换成ES5代码，以便在不支持ES6的浏览器中运行；
- webpack：用于打包和压缩JavaScript代码，以便减少加载时间；
- webpack-cli：用于在命令行中运行webpack命令。

在命令行中输入以下命令，安装这些依赖包：

npm install --save-dev babel-core babel-loader babel-preset-env webpack webpack-cli

5. 配置webpack

在根目录下创建一个名为 webpack.config.js 的文件，并将以下代码复制到文件中：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

这个配置文件指定了项目的入口文件和输出文件，以及使用的模块规则。

6. 编写JavaScript代码

在根目录下创建一个名为 src 的文件夹，并在其中创建一个名为 index.js 的文件。

在 index.js 中编写JavaScript代码，可以使用ES6语法，例如：

const hello = () => {
  console.log('Hello, world!');
}

hello();

7. 运行代码

在命令行中输入以下命令，运行webpack打包代码：

npx webpack

然后在浏览器中打开根目录下的 dist/index.html 文件，就可以看到输出结果了。

8. ESLint和Prettier配置

在根目录下创建一个名为 .eslintrc.json 的文件，并将以下代码复制到文件中：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "es5"
    }]
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module"
  }
}

这个配置文件指定了使用 ESLint 进行语法检查，并且使用 Prettier 进行代码格式化。

在 VScode 中按下 Ctrl+Shift+P，输入 "Open Settings (JSON)"，打开 VScode 的配置文件。

在配置文件中添加以下代码：

"eslint.enable": true,
"eslint.validate": [
  "javascript"
],
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": false
},
"prettier.eslintIntegration": true

这个配置文件指定了在保存文件时进行代码格式化和语法检查。

现在，我们就可以愉快地编写JavaScript代码了！