vscode使用Eslint+Prettier格式化代码的详细操作

下面是使用VS Code配置ESLint和Prettier的详细攻略：

安装VS Code插件

首先，需要安装VS Code的两个插件ESLint和Prettier。可以使用VS Code内置的插件市场进行安装，也可以在终端中使用npm进行安装。

1. 在VS Code的插件市场搜索并安装ESLint和Prettier插件。

如果你使用终端进行安装，可以使用下面的命令：
npm install eslint prettier --save-dev

1. 安装完插件后，重启VS Code。

配置ESLint

1. 在项目根目录下创建一个.eslintrc文件，文件内容如下：

{
"extends": ["eslint:recommended"],
"parserOptions": {
"ecmaVersion": 2019
},
"env": {
"es6": true,
"node": true
}
}

这里我们使用了ESLint的推荐配置，指定了使用ES6语法和Node.js的环境。可以根据具体需求修改配置。

1. 在VS Code的设置中搜索eslint.autoFixOnSave并勾选上自动修复代码。这样每次保存文件时，ESLint会自动格式化代码。

配置Prettier

1. 在项目根目录下创建一个.prettierrc文件，文件内容如下：

{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}

这里配置了Prettier的一些常用选项，如使用2个空格缩进、使用单引号等。可以根据具体需求修改配置。

1. 在VS Code的设置中搜索prettier.eslintIntegration并勾选上。这样ESLint会调用Prettier来格式化代码。

2. 在VS Code的设置中搜索prettier.printWidth并修改为80。这表示每行代码最多显示80个字符，超出部分会自动换行。

完整示例

下面是一个完整的示例：

1. 以React项目为例，在项目根目录下执行如下命令安装相关依赖：

npx create-react-app my-app
cd my-app
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

1. 在项目根目录下创建一个.eslintrc文件，文件内容如下：

{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"plugins": ["react"],
"rules": {}
}

这里使用了react/recommended扩展，并且指定了使用ES6语法、浏览器和Node.js环境。

1. 在项目根目录下创建一个.prettierrc文件，文件内容如下：

{
"tabWidth": 2,
"semi": true,
"singleQuote": true
}

这里配置了Prettier的一些常用选项，如使用2个空格缩进、使用单引号等。

1. 在VS Code的设置中搜索eslint.autoFixOnSave和prettier.eslintIntegration，并勾选上。

2. 在VS Code的设置中搜索prettier.printWidth并修改为80。

3. 在代码中添加一些错误或不符合规范的代码，例如：

class App extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
</div>
)
}
}

可以看到，这段代码中有一些不规范的地方，例如缺少分号、没有使用单引号、使用了空格而不是Tab键进行缩进等。

1. 保存文件后，可以看到VS Code会自动修复代码，并且将代码格式化为符合规范的样子，例如：

class App extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
}

可以看到，自动修复后的代码使用了分号、单引号，并且使用两个空格进行缩进。

总结

以上就是使用VS Code配置ESLint和Prettier的详细攻略。通过这样的配置，可以大大提高代码的规范性和可读性，使代码更易于维护和协作。