vscode保存代碼，自動按照eslint規范格式化代碼設置

編輯器代碼風格一致，是前端代碼規范的一部分。我們現在前端絕大部分都在使用eslint，或者將要把代碼改為eslint，那么此時我們怎么方便使用這個規范呢，下面我來介紹一下使用vscode+eslint 自動保存，自動格式化的一種方式！

首先需要裝一些vscode插件

eslint、Vetur、Prettier，具體的插件說明可參考作者之前的一篇文章。

vscode插件安裝

安裝完成后需要配置一下eslint，打開eslint的配置文件(左下角有個設置,點開搜索settings.json)

打開settings.jons，貼上如下配置，注意自己原有的vscode主題和字體等不要替換掉

{ "workbench.colorTheme": "One Monokai", "editor.fontSize": 14, "eslint.enable": true, //是否開啟vscode的eslint "eslint.autoFixOnSave": true, //是否在保存的時候自動fix eslint "editor.formatOnSave": true, // #每次保存的時候自動格式化 "eslint.options": { //指定vscode的eslint所處理的文件的后綴 "extensions": [ ".js", ".vue", ".ts", ".tsx" ] }, "eslint.validate": [ //確定校驗準則 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true }, { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ], "files.autoSave": "off", "files.associations": { "*.wpy": "vue", "*.wxml": "wxml", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript", "*.html": "html" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, // vscode默認啟用了根據文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": false, // #使用單引號替代雙引號 "prettier.singleQuote": true, // #讓函數(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "git.enableSmartCommit": true, "editor.quickSuggestions": { "strings": true }, //一定要在vutur.defaultFormatterOptions參數中設置，單獨修改prettier擴展的設置是無法解決這個問題的，因為perttier默認忽略了vue文件(事實上從忽略列表移除vue也不能解決這個問題) "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // force-aligned | force-expand-multiline "wrap_attributes": "force-aligned" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": true }, "prettier": { // #去掉代碼結尾的分號 "semi": false, // #使用單引號替代雙引號 "singleQuote": true } }, // 插件KoroFileHeader // 文件頭部注釋-快捷鍵crtl+alt+i(window),ctrl+cmd+t (mac) "fileheader.customMade": { "Descripttion": "", //"version": "", "Author": "voanit", "Date": "Do not edit", "LastEditors": "voanit", "LastEditTime": "Do not Edit" }, //函數注釋-快捷鍵ctrl+alt+t (window), ctrl+alt+t(mac) "fileheader.cursorMode": { "name": "", // "test": "test font", // "msg": "", "param": "", "return": "" }, //安裝live Server插件 "liveServer.settings.donotVerifyTags": true, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.NoBrowser": true, "liveServer.settings.CustomBrowser": "chrome", //設置默認打開的瀏覽器 "liveServer.settings.host": "127.0.0.1", "liveServer.settings.port": 5000, //設置本地服務的端口號 "liveServer.settings.root": "/dist"}

接下來就可以愉快的使用自動保存eslint格式了。

結尾彩蛋

歡迎關注前端之階公眾號，獲取更多前端知識，加入前端大群，與知名互聯網大佬做朋友，開啟共同學習新篇章！

總結

以上是生活随笔為你收集整理的eslint 无法格式化ts_vscode保存代码，自动按照eslint规范格式化代码设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。