在vscode怎麼用eslint和prettier？以下這篇文章跟大家介紹一下vscode中的eslint用法、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外掛程式的要求：【推薦學習：《vscode入門教學》】
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
注意： 此時項目就會按照預設設置，以及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的相關知識，請造訪：vscode教學！ ！
以上是淺析在vscode怎麼用eslint和prettier的詳細內容。更多資訊請關注PHP中文網其他相關文章！
