vscode编写vue项目需要配置什么（手把手配置VSCode使用ESLint）

VSCode版本：VSCode 1.71.2

1、创建项目

$ yarn create vite

1.1、输入项目名称：02-my-app

√ Project name: ... 02-my-app

1.2、选择框架：vue

? Select a framework: » - Use arrow-keys. Return to submit. Vanilla > Vue React Preact Lit Svelte

1.3、选择项目类型：JavaScript。

? Select a variant: » - Use arrow-keys. Return to submit. > JavaScript TypeScript Customize with create-vue Nuxt

2、进入项目目录

$ cd 02-my-app

3、安装 ESLint

$ yarn add -D eslint

4、初始化 ESLint 配置

$ npm init @eslint/config

4.1、选择模式

? How would you like to use ESLint? ... To check syntax only > To check syntax and find problems To check syntax, find problems, and enforce code style

这里笔者选择的是To check syntax and find problems。

4.2、选择语言模块

? What type of modules does your project use? ... > JavaScript modules (import/export) CommonJS (require/exports) None of these

这里笔者选择的是JavaScript modules (import/export)。

4.3、选择语言框架

? Which framework does your project use? ... React > Vue.js None of these

这里笔者选择的是Vue.js。

4.4、选择是否使用 TypeScript

Does your project use TypeScript? » No / Yes

这里笔者选择的是No。

4.5、选择代码在哪里运行

? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection) √ Browser √ Node

这里Browser和Node两个都要选中，ESLint 会报'module' is not defined的错误。

4.6、选择ESLint配置文件的格式

? What format do you want your config file to be in? ... > JavaScript YAML JSON

这里笔者选择的是JavaScript。

4.7、选择是否安装eslint-plugin-vue@latest

The config that you've selected requires the following dependencies: eslint-plugin-vue@latest ? Would you like to install them now? » No / Yes

这里笔者选择的是Yes。

4.8、选择使用哪个软件包管理器

? Which package manager do you want to use? ... npm > yarn pnpm

这里笔者选择的是yarn。

执行成功后会在项目根目录下创建一个eslintrc.cjs文件。

eslintrc.cjs文件内容：

module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:vue/vue3-essential" ], "overrides": [ ], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": [ "vue" ], "rules": { } }

5、安装Prettier

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

5.1、创建.prettierrc文件并修改其内容。

$ touch .prettierrc

.prettierrc文件内容：

{ "bracketSpacing": true, "printWidth": 120, "proseWrap": "always", "semi": false, "singleQuote": true, "trailingComma": "none" }

修改.prettierrc文件内容后需要重新启动下VSCode。

这里只是简单列举了几个配置属性，如果需要配置其它属性可以根据需要自行配置。

6、修改eslintrc.cjs文件。

主要修改了如下两个地方。

完整的eslintrc.cjs文件内容：

module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended' ], overrides: [], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: ['vue', 'prettier'], rules: {} }

7、附录

7.1、package.json文件内容：

{ "name": "02-my-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.1.0", "eslint": "^8.23.1", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.5.1", "prettier": "^2.7.1", "vite": "^3.1.0" } }

7.2、下面是笔者 VSCode 的配置信息：

{ "update.enableWindowsBackgroundUpdates": false, "workbench.iconTheme": "material-icon-theme", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 每次保存的时候自动格式化 "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.format.enable": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ "javascript", "javascriptreact", "vue", "typescript", "typescriptreact" ] }

,