189 8069 5689
在vscode中如何用eslint和prettier，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
目前创新互联已为上千的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、曲沃网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
1）首先在vscode中安装eslint，然后在vscode的settings.json添加如下代码
"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序2）必须在项目中安装eslint（或者全局安装）
这个是vscode中eslint插件的要求：
3）在根目录中添加 .eslintrc.js 文件，添加如下代码
module.exports = {
root: true,
env: {
node: true,
},
extends: ["eslint:recommended"],
parserOptions: {
parser: "babel-eslint",
},
rules: {}
};4）rules 里面的设置
quotes: [ 'error', 'single' ], semi: ['error', 'never']
属性值数组中第一个元素设置
属性值数组中第二个元素设置
eslint.bootcss.com/docs/rules/ 找到对应属性点击进入，然后找到options
eslint:recommended 默认规则的都有标记
注意：此时项目就会按照默认设置，以及rules里面的规则进行提示，保存时也会根据eslint的规则就行格式化。
（注：eslint与prettier的结合视情况而定，不是非得要与prettier一起使用）
1）首先在vscode中安装prettier插件，然后在vscode中的 settings.json 里面添加下面的代码
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}2）在项目中安装prettier
同时还需要安装eslint-plugin-prettier、eslint-config-prettier，这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示（注意这两个插件的版本号问题，最新的 eslint-plugin-prettier 的4.0版本使用时有问题）
"eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.3.1"
然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended
extends: ["eslint:recommended", "plugin:prettier/recommended"]
然后就可以在根目录下添加.prettierrc.js 文件，eslint将按照里面的规则进行提示，同时保存的时候也会按照里面的规则进行格式化
module.exports = {
semi: false,
singleQuote: true,
bracketSpacing: true,
}1）首先在创建的时候选择eslint + prettier的设置
2）在根目录下创建 .prettierrc.js，并添加规则
module.exports = {
semi: false,
singleQuote: true,
bracketSpacing: true,
};默认情况下，当代码中的格式不正确时，会是warn警告
如果需要把它变成error，需要在.eslintrc.js中添加如下代码
rules: {
//…
'prettier/prettier': 'error'
}注：在修改完一些配置后，vscode可以不会马上生效，此时可以关闭项目，重新打开试试
关于在vscode中如何用eslint和prettier问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。