每天学习一个vue插件(3)——eslint + prettier + stylelint

不要停止奔跑，不要回顾来路，来路无可眷恋，值得期待的只有前方

前言

工欲善其事，必先利其器

1 vscode

extensions.json

{
  "recommendations": [
    // 文件格式化插件
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "octref.vetur",
    
    // 样式格式化插件
    "hex-ci.stylelint-plus"
  ]
}

settings.json

{
  // [vue，js]文件检测
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 文件保存
  "editor.formatOnSave": true,
  
  // 保存自动检测
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    // 样式自动格式化
    "source.fixAll.stylelint": true
  },
  
  // eslint配置
  "eslint.format.enable": false,
  "eslint.alwaysShowStatus": true,
  
  // prettier配置
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  
   // stylelint配置
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[scss]": {
    "editor.formatOnSave": true
  }
}

2 eslint

.eslint.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ['vue'],
  // 添加 prettier扩展，解决eslint 和 prettier冲突问题
  extends: ['plugin:vue/essential', '@vue/standard', 'prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 允许函数前没有空格
    // 'space-before-function-paren': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

3.prettierrc

安装 eslint-config-prettier

// 解决eslint 和 prettier冲突问题
npm i prettier eslint-config-prettier eslint-plugin-vue @vue/eslint-config-standard -D

.prettierrc.js

module.exports = {
  tabWidth: 2,
  // 强制单引号
  singleQuote: true,
  // 强制取消末尾分号
  semi: false
}

4.stylelintrc

安装相关插件

npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-scss -D

.stylelintrc.js

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
  plugins: ['stylelint-scss'],
  rules: {
    indentation: 2,
    'no-missing-end-of-source-newline': null,
    'max-nesting-depth': 3,
    'selector-max-compound-selectors': 3,
    'at-rule-no-unknown': null,
    'unit-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    'function-url-quotes': 'always',
    'number-leading-zero': null,
    'unit-whitelist': ['em', 'rem', 's', '%', 'px','rpx', 'deg'],
    'unit-case': 'lower'
  }
}

尾声

别着急，慢慢来，都会好起来的 ^_^

晚安鸭，晚安呀

参考链接

• # vscode+stylelint的入门
• vscode eslint prettier 配置
• vscode eslint stylelint 配置

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper