vscode 설정 setting.json 파일 구현 eslint 자동 형식 코드

1.ESlint+Vetur ESlint 코드 규범 실현


중점

{
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
{
“language”: “vue”,
“autoFix”: true
},
{
“language”: “html”,
“autoFix”: true
}
]
}

3.새 버 전 설정

{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“eslint.probe”: [“javascript”, “vue”, “html”]
}

다음은 자신의 vscode-settings.json 에 대한 기록 입 니 다(참고 만 제공)

{
 //      
 "editor.fontSize": 18,

 //      
 "editor.lineHeight": 24,

 //      
 "editor.lineNumbers": "on",

 //                      。
 "editor.parameterHints.enabled": true,

 //          
 "window.zoomLevel": 0,

 //     
 "workbench.iconTheme": "vscode-icons",

 //     
 "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",

 //     
 "editor.wordWrap": "on",

 //    vscode    
 "workbench.colorCustomizations": {
  "tab.activeBackground": "#253046", //          
  "activityBar.background": "#253046", //      
  "sideBar.background": "#253046", //      
  "activityBar.foreground": "#23f8c8", //      (      )
  "editor.background": "#292a2c" //       
  // "editor.foreground":"#ff0000", 	//        
  // "editor.findMatchBackground":"#23f8c8", 	//          
  // "editor.findMatchHighlightBackground":"#ff0000", 	//          
  // "editor.lineHighlightBackground":"#ff0000", 	//              
  // "editor.selectionBackground":"#ff0000", 	//          
  // "editor.selectionHighlightBackground":"#ff0000", 	//                
  // "editor.rangeHighlightBackground":"#ff0000", 	//           ，   "Quick Open"  “  ”  
  // "editorBracketMatch.background":"#ff0000", 	//        
  // "editorCursor.foreground":"#ff0000", 	//       
  // "editorGutter.background":"#ff0000", 	//          ，            
  // "editorLineNumber.foreground":"#ff0000", 	//       
  // "sideBar.foreground":"#ff0000", 	//      
  // "sideBarSectionHeader.background":"#ff0000", 	//           
  // "statusBar.background":"#ff0000", 	//        
  // "statusBar.noFolderBackground":"#ff0000", 	//               
  // "statusBar.debuggingBackground":"#ff0000", 	//            
  // "tab.activeForeground":"#ff0000", 	//             
  // "tab.inactiveBackground":"#ff0000", 	//          
  // "tab.inactiveForeground":"#ff0000" //               
 },
 // vscode               tabsize   
 "editor.detectIndentation": false,

 //     tabsize
 "editor.tabSize": 2,

 // #            
 "editor.formatOnSave": true,

 // #   ( )            
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

 // #           
 "vetur.format.defaultFormatter.html": "js-beautify-html",

 // # vue  js       ts       
 "vetur.format.defaultFormatter.js": "vscode-typescript",

 //         ESLint    。
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },

 //   emmet  vue  
 "emmet.includeLanguages": {
  "wxml": "html",
  "vue": "html"
 },

 //           
 "minapp-vscode.disableAutoConfig": true,

 //    （  ）
 "editor.minimap.enabled": true,

 // tab     
 "files.associations": {
  "*.wpy": "vue",
  "*.vue": "vue",
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript"
 },

 //         ESLint CLI  API  ESLint。       
 "eslint.options": {
  "extensions": [".js", ".vue"]
 },

 //  onSave  onType   linter。   onType。
 "eslint.run": "onSave",

 //   ESLint             。
 "eslint.format.enable": true,

 //         ，  ESLint      ，        。
 "eslint.probe": ["javascript", "javascriptreact", "vue-html", "vue", "html"],

 //  rg.exe    cnpm     rg.exe      
 "search.followSymlinks": false,

 //  js-beautify-html      
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   "wrap_attributes": "force-aligned",
   "max_preserve_newlines": 0
  }
 },

 // style      indent
 "vetur.format.styleInitialIndent": true,

 //                    。
 "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,

 //                 。
 "typescript.format.insertSpaceBeforeFunctionParenthesis": true,

 //      
 "vsicons.dontShowNewVersionMessage": true,

 //                         。
 "explorer.confirmDelete": true,

 //   eslint-plugin-vue  <template>  vue-html
 "vetur.validation.template": false,

 //              。
 "workbench.colorTheme": "One Dark Pro"
}

총결산
vscode 설정 setting.json 파일 이 eslint 자동 형식 코드 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 설정 eslint 자동 포맷 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!