vs code 配置 stylelint eslint

Posted 2022-05-19 asdfasdfasdad

安装npm插件

• npm install –save-dev eslint
• npm isntall –save-dev stylelint
• npm install –save-dev stylelint-config-standard

安装vs code的插件

• eslint
• stylelint

在项目根目录下创建文件

创建 .eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring

module.exports = 
    root: true,
    parser: 'babel-eslint',
    parserOptions: 
        sourceType: 'module'
    ,
    env: 
        browser: true,
        es6: true,
        amd: true,
        commonjs: true
    ,
    globals: 
        __HOST__: false,
        BMap: false,
        $: false,
        Vue: false,
        Vuex: false,
        vueRouter: false
    ,
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    extends: "standard",
    // required to lint *.vue files
    plugins: [
        'html',// eslint-plugin-html
        'vue', // 全称eslint-plugin-vue
    ],
    // add your custom rules here
    rules: 
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "indent": ["error", 4,  "SwitchCase": 1 ],
        "quotes": ["error", "single"],
        "semi": ["error", "always"],
        "space-before-function-paren": ["error", "never"],
        "require-jsdoc": ["error", 
            "require": 
                "FunctionDeclaration": true,
                "MethodDefinition": true,
                "ClassDeclaration": true,
                "ArrowFunctionExpression": false
            
        ],
        "valid-jsdoc": ["error", 
            "requireReturn": false
        ]
    

创建.eslintignore文件

//这进而的配置是在编译时过滤掉不验证的目录或文件

创建.stylelintrc文件

  // 扩展第三方插件规范stylelint-config-standard
  "extends": "stylelint-config-standard",
  "rules": 
    "function-url-quotes": "always",
    "indentation": 4, //缩进4位
    "number-leading-zero": null,
    "unit-whitelist": [
      "em",
      "rem",
      "s",
      "%",
      "px",
      "deg"
    ]
  

创建.stylelintignore文件

//这进而的配置是在编译时过滤掉不验证的目录或文件

vs code自定义用户配置

  //"workbench.iconTheme": "vscode-icons", //工作台图标主题
  // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
  "editor.tabSize": 4,
  "editor.detectIndentation": true,
  // 以像素为单位控制字号。
  "editor.fontSize": 18,
  // 控制终端游标是否闪烁。
  "terminal.integrated.cursorBlinking": true,
  // 保存时候自动格式化
  "editor.formatOnSave": false,
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.validation.template": false,
  // 用来进行保存时自动格式化，但是默认只支持 javascript .js 文件
  "eslint.autoFixOnSave": false,
  // 终端cmd字体
  "terminal.integrated.fontFamily": "monospace",
  // 终端cmd字号
  "terminal.integrated.fontSize": 16,
  // 默认格式化html使用js-beautify-html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": 
    "js-beautify-html": 
      // [auto|force|force-aligned|force-expand-multiline] 
      // 属性多行排列
      "wrap_attributes": "auto" // vue组件中html代码格式化样式
    
  ,
  "eslint.validate": [
    "html",
    "vue",
    
      // 这样就能够直接支持在html和vue中自动保存成eslint风格的代码
      "language": "html",
      "autoFix": true
    ,
    
      "language": "vue",
      "autoFix": true
    
  ],
  // 防止格式化代码后单引号变双引号
  // "prettier.singleQuote": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "files.autoSave": "off",
  // "background.customImages": [
  //   "file:///D:/用户目录/Pictures/bg1.jpg"
  // ],
  // "background.useDefault": false,
  // "background.style": 
  //   "content": "''",
  //   "pointer-events": "none",
  //   "position": "absolute",
  //   "z-index": "99999",
  //   "width": "100%",
  //   "height": "100%",
  //   "background-position": "center",
  //   "background-repeat": "no-repeat",
  //   "opacity": 0.1
  // ,
  // gitlens配置
  "gitlens.advanced.messages": 
    "suppressCommitHasNoPreviousCommitWarning": true,
    "suppressCommitNotFoundWarning": true,
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressGitVersionWarning": true,
    "suppressLineUncommittedWarning": true,
    "suppressNoRepositoryWarning": true,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  ,
  "workbench.startupEditor": "newUntitledFile",
  "git.confirmSync": false,
  "files.autoSaveDelay": 3000,
  //"gitlens.historyExplorer.enabled": true,
  //"terminal.integrated.rendererType": "dom",
  "search.followSymlinks": false, // "easysass.compileAfterSave": true,
  // "easysass.excludeRegex": "",
  // "easysass.formats": [
  //   
  //     "format": "compact",
  //     "extension": ".css"
  //   
  // ],
  // "easysass.targetDir": "",
  "css.validate": false,
  "less.validate": false,
  "scss.validate": true,
  "prettier.tabWidth": 4 //缩进js sass; 安装vscode prettier插件