eslint+prettier統(tǒng)一代碼風格的實現(xiàn)方法
1.實現(xiàn)效果
Eslint校驗代碼語法,prettier統(tǒng)一格式化代碼,按下保存自動修復eslint錯誤,自動格式化代碼。
2.安裝vscode插件
- Vetur
- ESLint
- Prettier - Code formatter
3.配置vscode設置
文件–首選項–設置,打開json模式,添加以下配置:
{ // 控制工作臺中活動欄的可見性。 "workbench.activityBar.visible": true, //主題設置 "workbench.colorTheme": "Monokai", // 默認編輯器字號 "editor.fontSize": 14, //是否自動換行 "editor.wordWrap": "on", "workbench.editor.enablePreview": false, //打開文件不覆蓋 "search.followSymlinks": false, //關閉rg.exe進程 "editor.minimap.enabled": false, //關閉迷你圖快速預覽 "files.autoSave": "onWindowChange", // 切換窗口時自動保存。 "editor.lineNumbers": "on", //開啟行數(shù)提示 "editor.quickSuggestions": { //開啟自動顯示建議 "other": true, "comments": true, "strings": true }, "editor.tabSize": 2, //制表符符號eslint //.vue文件template格式化支持,并使用js-beautify-html插件 "vetur.format.defaultFormatter.html": "js-beautify-html", //js-beautify-html格式化配置,屬性強制換行 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, //根據(jù)文件后綴名定義vue文件類型 "files.associations": { "*.vue": "vue" }, //配置 ESLint 檢查的文件類型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //保存時eslint自動修復錯誤 "eslint.autoFixOnSave": true, //保存自動格式化 "editor.formatOnSave": true }
4.配置.eslintrc.js
module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', 'eslint:recommended'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', //強制使用單引號 quotes: ['error', 'single'], //強制不使用分號結尾 semi: ['error', 'never'] }, parserOptions: { parser: 'babel-eslint' } }
5.配置.prettierrc
{ "eslintIntegration": true, "singleQuote": true, "semi": false }
到此這篇關于eslint+prettier 統(tǒng)一代碼風格的實現(xiàn)的文章就介紹到這了,更多相關eslint prettier 統(tǒng)一代碼風格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
前端JavaScript處理小數(shù)精度問題的最佳實踐教程
在JavaScript開發(fā)過程中,小數(shù)精度問題是一個常見的難題,本文介紹了兩種解決小數(shù)精度問題的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10js實現(xiàn)首屏延遲加載實現(xiàn)方法 js實現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實現(xiàn)首屏延遲加載實現(xiàn)方法,以及js實現(xiàn)多屏單張圖片延遲加載效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07小議Function.apply() 之一------(函數(shù)的劫持與對象的復制)
小議Function.apply() 之一------(函數(shù)的劫持與對象的復制)...2006-11-11JavaScript操作文件_動力節(jié)點Java學院整理
在HTML表單中,可以上傳文件的唯一控件就是<input type="file">。下面通過本文給大家分享JavaScript操作文件的方法,感興趣的朋友一起看看吧2017-06-06