zoukankan      html  css  js  c++  java
  • Windows系统零开始前端开发环境配置

    1. 安装nodejs

    国内下载页面(推荐)
    官网下载页面
    现在的nodejs自带NPM,只需点击下一步下一步安装即可。
    为了加速国内NPM包下载,可配置淘宝NPM镜像

    2. 安装git

    国内下载页面(推荐)
    官网下载页面
    国内直接从官网下载比较困难,需要翻墙。
    所以这里要感谢淘宝NPM镜像提供空间。

    3. 安装VSCode和常用插件

    官网下载页面
    下面是常用的插件列表:
    Git History
    Git Lens
    Babel ES6/ES7
    ESLint
    EditorConfig for Visual Studio Code
    以上插件用于优化编辑器里进行git管理,代码规范化的体验。

    4. 优化VSCode编辑器默认行为

    在项目目录下新建.editorconfig文件。
    包括统一tab的占位,保存文件时最后一行再插入新行,去除首尾空格。

    # 配置文件内容
    # editorconfig.org
    
    root = true
    
    
    [*]
    charset = utf-8
    end_of_line = lf
    indent_size = 2
    indent_style = space
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    
    [*.md]
    trim_trailing_whitespace = false
    

    5. 配置VSCode编辑器代码规范

    1. 安装airbnb的规范
      npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

    2. 在项目目录下新建.eslintrc文件

    { "extends": "airbnb", "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, "globals": { "Babel": true, "React": true }, "plugins": [
    "react"
    ], "rules": { "global-require": "off", "import/no-unresolved": "off", "no-underscore-dangle": "off", "no-new-func": "off", "no-param-reassign": "off", "react/prefer-stateless-function": "off", "react/no-multi-comp": "off", "react/jsx-no-bind": "off", "react/jsx-indent": "off", "react/jsx-first-prop-new-line": "off", "react/jsx-filename-extension": "off", "no-restricted-syntax": "off" }}
    
    1. 不是所有文件都需要eslint来校验格式
      http://eslint.org/docs/user-guide/configuring
      .eslintignore
    **/dist/**
    **/src/**
    **/examples/**
    **/node_modules/**
    **/server.js
    **/webpack.config*.js
    
  • 相关阅读:
    Freemarker-2.3.22 Demo
    Freemarker-2.3.22 Demo
    Freemarker-2.3.22 Demo
    Freemarker-2.3.22 Demo
    Oracle PLSQL Demo
    Oracle PLSQL Demo
    Oracle PLSQL Demo
    Oracle PLSQL Demo
    Oracle PLSQL Demo
    Oracle PLSQL Demo
  • 原文地址:https://www.cnblogs.com/samwu/p/7469624.html
Copyright © 2011-2022 走看看